WordPress.org

Ready to get started?Download WordPress

Forums

Rehabtabs
[resolved] Add scroller within tab (5 posts)

  1. steve49589
    Member
    Posted 1 year ago #

    Nice plugin. I'm wondering if there is a way to set the maximum height or an absolute height for the tab box that holds the content?

    One of my tabs has one paragraph of text about 250 px height which is perfect for the theme, but the second tab will hold a lot of information and pushes the footer way down the page. I'm wondering if that second tab could include a scroll bar within?

    Thanks.

    http://wordpress.org/extend/plugins/rehabtabs/

  2. Grant Mangham
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  3. steve49589
    Member
    Posted 1 year ago #

    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...

  4. Grant Mangham
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  5. steve49589
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.