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;
The other setting for the text box are:
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);}
Please find the working project attached.
Regards,