The task is to have a text box that auto sizes with the amount of text, but when it gets to say 250px it stops and you start to see scroll bars.
But then if the browser window is reduced in height the text box responds to this leaving a 20px gap at the top and bottom.
Open the attached project and the four text boxes to the right which are being used as buttons set varying lengths of text to the text box located top left.
The first two buttons set a length of text which means the text box is less than 250px in height.
The last two buttons set more text meaning the text box would be longer than 250px, but it stops at 250px and you now see scroll bars.
Selecting the last button, "Set Text Four" which has the most text so you will see a longer scroll bar.
With this selected reduce the height of the browser, you will see the text box responds keeping a 20px gap at the top and bottom.
How it works:
The text box needs the following attributes selected:
Then under the text boxes, CSS Styles Inner Element set:
Code: Select all
max-height: min(250px, 100vh - 40px)
Looking at the CSS, the max height of the text box will be 250px.
The text box will be 100% if the browser window is less than 250px, but when it reaches 250px and above then the text box stop changing height and the scroll bars show.
As the text box is set to Y: 20px, it is 20px off the Botton of the browser.
If the setting in the CSS code was -20px, it would bring the text box up so it would now be at the bottom of the browser window.
So making -40px means it is now 20px up from the bottom of the browser window.
Looking at the CSS you can see you can change any of the settings.
250px is the max height of the text box before it stops and you see scroll bars.
-40 is how much the text box will be from the bottom of the browser window.
As an example, if the text box Y: was 10px and you wanted 10px up from the button the value in the CSS code will be -20px.