Responsive Design Simplified
By Erick Engelke
June 2, 2025
Responsive design allows you to adjust to different and changing (in real time) window dimensions, so your EWB app can look good no matter whether its displayed on a desktop, a more limited laptop, or a cell phone or tablet in portrait or landscape mode.
Beginner users use absolute positioning, where you specify the Top and Left and Height and Width values.
Advanced users prefer responsive design with its relative positioning.
Start at one edge or corner
Add a component to your form OR to a container like a TBasicPanel. Set its Layout Position to one of its values:
Start at the top-left, or the bottom left, or bottom right, or bottom centre, your choice. But then specify which way it consumes.
If starting at the top, Layout.Consume to the right means the next control will be placed to its right, or Bottom means the next component will be below it, etc.
Layout.Stretch tells it whether to stretch to the end of the Left or right, top or bottom, or bottom Right, whichever you want.
Layout.Reset tells it to stop growing in the current direction and return to the base (eg. to the right margin).
Re-ordering
Set the LayoutOrder is the index… where does the current element fit in the big picture.