[Plugin: Rehabtabs] Add scroller within tab

Hi Steve,

I haven’t tested this, but you could try and simply wrap the longer text in div tags within the shortcodes. Lets say this div has an ID of scrolling. You could then define a height of 250px for #scrolling in your CSS.

Let me know if it works.

OK. Got me thinking and I tried it, but it did not work. (May have done it wrong.) I did the following instead and placed this – as an example – within the short code for the tab that contained the longer text.

<div style="overflow: auto; height: 200px;">
Some example text
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
</ul>
</div>

The above did work and I did not put anything into the CSS sheet.

Curious now if I could make this more standard for all of the tabs? In other words, for any tabs created, always make them 200px height, and the scroll bar would show up if needed?

Note – My solution is pretty clunky but it works. The problems happen when you switch back and forth between Visual and HTML mode in the WordPress editor.

Still looking for a better solution if anyone has ideas…

You did what I suggested, you just did it in-line instead of in the external CSS (so no need for an ID).

To avoid the problems when switching between editors, use the external CSS instead. That way the TinyMCE editor doesn’t have to handle your code at all.

In fact, you can drop the div entirely. Instead, try

.ui-tabs-panel {
overflow: auto;
height: 200px;
}

Again, this should be in your external CSS.

Thank you. I did try the external CSS first, but could not get that to work. This solution is much cleaner, as we’re taking all of your tabs – referenced via .ui-tabs-panel – and assigning some consistency and allowing for the scroll.

Works well. Thank you.