Height of controls in Web Apps based on users browser window

ptotushek

I would like to have a listbox (or chart, etc.) on a web page grow or shrink with the user's browser window. Horizontally works fine with the built in responsive support, but I can't find a way to do this vertically. My goal is to have a listbox be full size on the users browser window - no matter the size of the window.

Garry

You haven’t missed a setting. The current Web layout adapts to the browser’s width, but control heights are based on fixed-height grid rows. Increasing Row Span makes a ListBox or Chart taller, but it won’t automatically follow the browser window’s height.

I’ve logged a feature request to let Web controls fill the remaining browser height, so they can grow and shrink vertically as the window is resized.

ptotushek

Thank you Gary!

Garry

I’ve implemented this for the next release 🙂

In the Web designer, select your ListBox, Chart or other control and choose Placement → Height → Fill remaining. It will grow and shrink with the browser’s available height, leaving room for headings and other controls above or below it.

Row Span sets the minimum height. If the browser becomes too short to accommodate that minimum, the page remains scrollable. You can choose the height mode separately at each breakpoint, so wider layouts can fill the available height while a phone layout uses fixed heights.

There’s also a Viewport height setting in the designer so you can preview the behaviour without running the app. Existing layouts keep their fixed heights until you opt in.

This is tracked in feature request #1899.

ptotushek

That is perfect!

cdjgreen

This is a great addition! Thanks Gary!