Image popup with auto sizing text with a limit

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

Wed Jan 06, 2021 9:58 pm

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 905 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 905 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 905 times

Please find the working project attached.
(41.12 KiB) Downloaded 51 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
Post Reply