Yes this should be possible, if you make a grid layout with columns and then add your scrollable content into these columns.
I can’t find any reference in the documentation to “scrollable content” or “scrollable” or “scroll bars.” I have two columns next to each other and cannot figure out how to make them scroll separately. They only seem to scroll together as the whole page scrolls.
Actually I have a sticky header above the columns that does not scroll. Both the columns scroll under it. I added a Sticky Block plug-in to make the left column stay where it is, but if the window is not big enough the bottom of the column is never visible, and I would like for it to be scrollable on its own.
Hi, you can give the two columns each the css class of e.g. scroll-300
This class is then limited to 300px height and the overflow should be scrollable.
You would need to add this css class via your theme or other methods to “add custom css”:
.scroll-300{
max-height: 300px;
overflow: scroll;
}
Thanks. I haven’t yet ventured into CSS coding or customizing, but I may try this. The only problem I see is that this depends on setting a fixed maximum pixel height for the class. Ultimately what I think I would like is to set it to scroll whenever the window causes overflow. Would there be a function which set the max-height of the block to a function of the detected window height?
Hi, yes there is something called vh this is the percentage of the Viewport Height and 100 vh is equal to the browser window’s height.
Every Browser handles vh differently, some exclude the bookmark bar and thus this looks different to everything.
I don’t get tho why you would want to limit the content to the browser height, since this is just default behavior, always when the content exceeds the height of the browser there will be a scrollbar.
Thanks again. I admit I am somewhat confused about all this. My original problem was that I had the left column in a Sticky Block (using the plug-in). It contains a list of topics which are links to other pages. The right hand column retains the post text, which can be much longer. I did not want the sidebar list of topics to scroll off the screen when the reader scrolled to read the text. I thought it was fine, until I realized that if I resized the window to a smaller height, the bottom of the list in the left sidebar was never visible. I thought the best solution would be for the list to have its own scroll bar and scroll separately within the frame of the list. Since there appears to be no way to explicitly add a scroll bar to a block to enable it to scroll within a limited space on the window, I was wondering if there was any way to achieve this.
I appreciate your patience and efforts to help.
Hi,
thanks for the clarification. There is no way to limit the height of a Block and thus make it scrollable so you need to use css.
You can use either px or vh or % to define the height.
.scroll-300{
max-height: 300px;
overflow: scroll;
}
You just have to give the Element that you want to make scrollable this class of “scroll-300” and then add the custom css via your preferred way (there are many guides to do this)
Note that you have to give the Element the class name without the dot ( . ) but in the css it self the dot needs to be present in front of the class name.
Thanks again. Eventually I shall try this. Right now I am going to stay focussed on the content, at some point I’ll dive into CSS.
