Image popup with auto sizing text with a limit

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

Hi,
This came up in support which was has a cool responsive text box.
The project uses the Hotspot type image and the information text is placed in the Hotspots Description text field.

Big shout out to Ondřej Král for the inspiration for this project.

The focus is on the text box.
It auto sizes in height from 20px to 120px.
If the text is longer than this then the scroll bar will show.

This project has 5 information hotspots that show the image and different amounts of text.

How it works.
There is a rectangle and text box placed under it. Both backgrounds are the same colour and alpha so looks part of the same background.

However as the text box auto sizes the popup will get longer. Once the text box reaches 120px heigh it will stop and the scroll bar then will be seen.


This is achieved by using CSS in the text boxes inner styles element:

Code: Select all

max-height: 120px;
Screenshot 2021-01-06 at 20.34.31.png
Screenshot 2021-01-06 at 20.34.31.png (35.39 KiB) Viewed 4388 times

The other setting for the text box are:

Screenshot 2021-01-06 at 20.54.46.png
Screenshot 2021-01-06 at 20.54.46.png (36.93 KiB) Viewed 4388 times


Scroll bar thumb
To make this white a line of code was added to the skins CSS style sheet.

Note Safari and Chrome, and I also believe Edge, uses Webkit so this will show up in the text box.
Firefox does not support Webkit and will appear slightly different.


Just add this to the style sheet:

Code: Select all



 .ggskin ::-webkit-scrollbar-thumb {background-color:  rgba(255,255,255,1);}

Screenshot 2021-01-06 at 20.29.51.png
Screenshot 2021-01-06 at 20.29.51.png (32.4 KiB) Viewed 4388 times

Please find the working project attached.
Regards,
Attachments
project.zip
(42.75 KiB) Downloaded 313 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/
4ctive
Posts: 35
Joined: Mon Dec 16, 2019 10:07 am

Hi Hopki,
That’s great and most exactly what I am looking fore. Except for one thing: I am using calc(100%-150px) for the height of my textbox. So the height is always responsive and fits in every screen size.
But I was missing the possibility to make the textbox smaller if there are only few words used for text.

Is there a chance to use max height with the calc argument?
Best Regards,
Benjamin
User avatar
Hopki
Gnome
Posts: 12999
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

For anyone following, this is a good project so will make a new post detailing the text box and how it works.
Regards,
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