Inside tab section slider

[jcockroft64]

The tab section has a slider that goes the same height as the whole section including the tab. Can you make the slider just the height of the text section/

[russellelliott]

This doesn't seem to be natively available in Wordpress. https://wordpress.org/support/topic/scroll-bars-on-tabbed-pages/

What we have now seems like the next best option.

[jcockroft64]

Russ, take note of the Voya's second comment in the link you sent me. I really think you could "create scrollable containers yourself" by creating an inner section (or block?) in the big block section (where the write-up goes) of the tab. Could you give that a try?

[russellelliott]

You aren't able to put containers inside of the tab widget. The only native modification options is a text editor.

I found a "scroll box" plugin that allows you to add a scrollbar to a Wordpress widget. Doesn't mention anything about it with tabs, but a demo with a blox of text shows it having a persistent header at the top, which is similar to our goal of having the tab content scroll within the tabs.

Scroll Box – Scroll Box is an elementor widget that allows you to display any content in a scroll box. You can also add a background image for the scroll box, making it easy to create a stylish design.

Video: https://www.youtube.com/watch?v=Wj_4NS0lSd8 Plugin Link: https://wordpress.org/plugins/bdthemes-element-pack-lite/ Pricing: https://www.elementpack.pro/pricing/ The "Scroll Box" is part of the pro features for the addon. The pro version costs $39.20/yr

[russellelliott]

This can be done with a div within the tab text editor

Forum: https://wordpress.org/support/topic/scroll-bars-on-tabbed-pages/ Codepen: https://codepen.io/gndev/pen/WNQJgzb

Here's the HTML code:

<div style="max-height: 300px; overflow-y: auto; background: #f2f2f2;">
  <p>... scrollable content goes here ...</p>
  <p>... scrollable content goes here ...</p>
  <p>... scrollable content goes here ...</p>
  <p>... scrollable content goes here ...</p>
  <p>... scrollable content goes here ...</p>
  <p>... scrollable content goes here ...</p>
  <p>... scrollable content goes here ...</p>
  <p>... scrollable content goes here ...</p>
  <p>... scrollable content goes here ...</p>
  <p>... scrollable content goes here ...</p>
  <p>... scrollable content goes here ...</p>
  <p>... scrollable content goes here ...</p>
</div>

In the tab editor, select "text" as the editor, paste the code, then switch to "visual" to edit it visually

[russellelliott]

Update: I've implemented the scrollbar within the tabs with the aforementioned div method. I surrounded the text with a div and applied CSS to them using classes. The primary tabs use the "primary" class and the secondary tabs use the "secondary" class. That way, if the heights need to be adusted, they can be applied to all of one type of tab at once, rather than changing them individually.

Here's what the CSS looks like right now, although the secondary tabs will be extended vertically to reach the bottom the page as per issue #35.

/*Primary Tab Div CSS*/
.primary{
    height: 353px; overflow-y: auto;
}
/*Secondary Tab Div CSS*/
.secondary{
    height: 353px; overflow-y: auto;
}

This CSS was applied globally in the Elementor editor; the same place as the tab CSS. Tutorial for this is outlined in issue #11.

With this in mind, here is what the HTML syntax of the tab content looks like:

<div class="primary">
This is a 50 mile hike that we did from Twin Lakes to Tuolumne Meadows. <span class="Apple-converted-space">  </span>It was a 6 day/5 night trip involved 50 miles of hiking 12,400 feet of elevation gain, and almost every meal was at a lake or river. <span class="Apple-converted-space">  </span>This is highly recommended.
</div>

Here is more info about CSS classes: https://www.w3schools.com/cssref/sel_class.asp

[jcockroft64]

[russellelliott]

Tweaked the CSS.

Overflow rules before:

overflow-y: auto;

Overflow rules after

overflow-x: hidden;
overflow-y: scroll;

This makes the scrollbar always appear, regardless of how tall the div is. As a result, the content's right margin automatically shifts to accommodate the scrollbar, which should solve that overlapping issue.

Now it looks like this:

/*Primary Tab Div CSS*/
.primary{
    height: 353px;
    overflow-x: hidden;
    overflow-y: scroll;
}
/*Secondary Tab Div CSS*/
/*
The height of the primary tabs is 353px
The height of the image carousel is 124px
353 + 124 = 477
The total height of the right column (up to elevation profile) is 830px.
Height of secondary = 100% - (830-477) = 100% - 353
*/
.secondary{
    height: calc(100vh - 353px);
    overflow-x: hidden;
    overflow-y: scroll;
}

Does it look better on your end?

[jcockroft64]

The changes didn't come through on my browser. I'm wondering if you have to annotate it with "important" or something?

[russellelliott]

I added padding to the right side of the div. Turns out the div extends to the rightmost edge of the scrollbar. By adding padding to the right side of the div, the text can be buffered from the scrollbar.

Here is the padding CSS: padding-right: 30px; This specifies the padding in the right side of the div. It is currently set to 30px, the amount I found to actually have a noticeable effect on my end. Let me know if this needs to be tweaked or isn't adequate.

Here is more info on CSS padding: https://www.w3schools.com/css/css_padding.asp

Here is what the full CSS Looks like for the primary and secondary tabs:

/*Primary Tab Div CSS*/
.primary{
    height: 353px;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    padding-right: 30px;
}
/*Secondary Tab Div CSS*/
/*
The height of the primary tabs is 353px
The height of the image carousel is 124px
353 + 124 = 477
The total height of the right column (up to elevation profile) is 830px.
Height of secondary = 100% - (830-477) = 100% - 353
*/
.secondary{
    height: calc(100vh - 353px);
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    padding-right: 30px;
}

[jcockroft64]

It does indeed show up on my browser now. I shut down my browser entirely and restarted. That i think was the issue ... unless you did something during your update.

[russellelliott]

Update; the scrollbar is now all the way to the right. The tabs widget has padding within it. To make the scrollbar all the way to the right, I set the right padding to be 0. This doesn't affect the padding within the tabs widget itself. I used the !important tag to overwrite the existing CSS rules for that element. CSS was added globally with the method specified in issue #11.

Here's the CSS I used:

/*Tab Widget CSS*/
.elementor-widget-tabs .elementor-tab-content{
    padding-right: 0px !important;
}

Here is more info about padding-right: https://www.w3schools.com/cssref/pr_padding-right.asp

[jcockroft64]

Excellent. It looks really good now.