Scrollable Container

Hello

Is there a way to create a container element within cornerstone that can be filled with many images/an instance of The Grid BUT the container element would have a fixed size and anything beyond that you would have to scroll around within the container?

For example:

If you have a container that is 500 px by 500 px that contains a grid of 100 100x100px images- the container is a fixed size and you scroll within it to show the parts of the grid that are beyond the viewport of the container

Hi,

To achieve that you can add this code as inline css of your container

width:500px;height:500px;overflow:scroll;

Thank you so much for this. How would I write the code if I wanted it to take up 90% x 90% of the viewport? Also right now it will not scroll within the container horizontally after it is published- is there something I can do to fix this?

Thank you!

Hi There,

Please set max-width: 90%; and max-height: 90%; for the view port.
For scroll you can use overflow: auto;

Hope that helps.

Thanks

When I set the height to 90% it sets it to 90% of the page size- not 90% of the pixel dimensions of the viewport boundaries- how can I set it to be 90% of the browser window boundaries?

Hi again,

Can you please share the URL of the page in question so we can take a look?

Thanks!

Yes it is jaredmadere.com

attaching login info below

Hi there,

You can use the vh unit instead of the %. So the height: 90vh can be the one you are looking after. Also for the width, it is vw so width: 90vw.

For more information: https://css-tricks.com/fun-viewport-units/

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.