Tabs not autoscrolling when longer than column / row

Support
#1

Hi

I’ve just been pointed to a bug in http://marketing-intelligence.co.uk/resources/papers-presentation/. I thought the tabs autoscrolled - but the middle one doesn’t seem to scroll at all, and the left one doesn’t when you use the bottom accordion. The right one seems to scroll down, but not up again.

I’ve tried this on both Chrome and Safari so it doesn’t seem to be a browser problem. I’m sure I tested this when I developed the site and it worked then (although perhaps I missed this). I can’t get it to scroll now - via using the “overflow: scroll;” style for the column. (I also tried it on the row - no difference). How can I get the tabs to autoscroll?

Thanks
Arthur

#2

Hi Arthur,

Please update your theme and plugins to latest version.

Cornerstone 2.1.3
X Theme 5.2.2

Don’t forget to review the changelog and backup your site before updating.

https://theme.co/changelog/

Thanks

#3

Hi

I’m now on Cornerstone 2.1.3 and X 5.2.2 - and still have the same problem i.e. the tab content is not scrolling.

I’m really not sure why as I’m sure it did when I designed it ages ago (with much older versions of CornerStone / X, etc.)

Thanks
Arthur

#4

Hi Arthur,

You can try adding the code below in the style field of your column element where your tabs resides.

display:block; max-height:500px;

Hope that helps.

#5

It helps if you click on the heading, when a scroll bar appears. However if you scroll down, and then click on something further down, the scroll bar disappears and you get stuck again. I thought of something like display: flex - but as that’s CSS3 I’m not sure how safe it would be to use (as some browsers don’t like it).

I also tried putting it in the row area - but didn’t work either. Could it be connected to that I’m using classic elements? Would re-doing the page help? (I hope this won’t be necessary - as it would be a real pain to switch from the current classic elements on all my pages).

#6

Hello There,

Thanks for writing in! After carefully investigating this issue, I found out that you are experiencing this issue because you have added a custom css that limits the height of the section. You have added this:

body .x-section {
    height: 85vh;
    width: 100vw;
    overflow: auto;
}

Please remove the height: 85vh; or at least change it to min-height: 85vh;. And by the way, please remove @Paul’s code too.

display:block; max-height:500px;

Please let us know how it goes.

#7

Thanks - that worked.

Didn’t think of looking in the overall CSS section. In fact I’d got the same error on a few other pages too when I checked these. My aim was to NOT use Parallax on pages - and have the block scroll along with the background or to scroll within the background if longer. Hence I limited the size of the block area - but put in a scroll, which I think worked at one point.

By changing the section height without switching Parallax on gave odd results in that the image seemed to resize when the block expanded. By switching it on I’m OK. (Not the original design but having it work is more important). I’ve now switched Parallax on for most pages - a few I left it off as I found it irritating to see the text scroll without the image also moving.

#8

Hi Arthur,

Thanks for the update. Glad to hear you got something working here.

1 Like