How to set the Height of a scroll container

I want to have a page that looks much like a typical license agreement: a Header with “Terms and Conditions” title, a scrollable region with the text of the document to accept, and accept/reject buttons at the bottom. The whole thing should be small enough that the bottom accept/reject buttons are visible when the page displays. I tried putting the text box with the agreement inside a Scroll container, but I do not see any way to constrain the height of the scroll container, nor any of the other containers. They seem to have ways to constrain the width, but not the height.  Where does one control the height?  Do you set it for the whole page or for a container on the page? Is the Scroll Container the correct widget to sue to have a scrollable text region of a fixed height?  Is there some other widget I should use? Right now, my large text block gets displayed in its entirety, I have to use the browser’s scroll bar to scroll down. So the accept/reject buttons are not visible when the page is displayed.
3 answers

Hi Richard,

The height of the elements can usually be set with CSS using height or max-height. 
It might be useful to use units relative to the size of the screen such as vh

Hope this helps.


If the standard scroll container is not a good fit, you can give a try to my widget

Scroll Dynamic Height Container


It's basically doing for you the CSS mentionned in the previous answer, it calculates the height dynamically to reach the bottom of the screen with a formula like : 100vh - Yposition


Add custom CSS to control the height of the Scroll Container. Replace "500px" with your desired height.

.scroll-container-height {

 max-height: 500px; 

overflow-y: auto;