Responsive text box with a size height limit

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
Hopki
Gnome
Posts: 11939
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Fri Dec 03, 2021 6:50 pm

A customer request but thought we would make this a forum project as we are sure others will find this useful.

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.

TextBox.gif
TextBox.gif (651.02 KiB) Viewed 321 times

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:

1.png
1.png (8.6 KiB) Viewed 321 times

Then under the text boxes, CSS Styles Inner Element set:

Code: Select all

max-height: min(250px, 100vh - 40px)
2.png
2.png (45.46 KiB) Viewed 321 times

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.

Regards,
Attachments
ResponsiveTextBox.zip
(13.07 KiB) Downloaded 55 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Post Reply