WordPress.org

Ready to get started?Download WordPress

Forums

WP UI - Tabs, Accordions, Sliders
tabs in accordion shrink due to CSS box-sizing:border-bo (9 posts)

  1. Darius
    Member
    Posted 2 years ago #

    Hi,

    My page theme is using CSS style box-sizing:border-box.
    This makes the accordion tabs to shrink with every click. However this does not happen when I turn off the "Uniform accordion panel height." option. Can this be fixed somehow?
    Problem demo page here

    http://wordpress.org/extend/plugins/wp-ui/

  2. kavingray
    Member
    Plugin Author

    Posted 2 years ago #

    Please try the following CSS. ( Options page -> Styles tab -> Custom CSS )

    .ui-accordion-content {
        overflow : visible !important;
    }
  3. Darius
    Member
    Posted 2 years ago #

    I had to add .wp-tab-content-wrapper to the selector to make it somehow work.
    This shows the content, but the background still disappears :/

  4. kavingray
    Member
    Plugin Author

    Posted 2 years ago #

    The above code alone should do the trick, I'm not able to find the rules anywhere? Please try increasing selector specificity rather than applying this to inner div.

    .ui-accordion .ui-accordion-content {
      overflow : visible !important;
    }
  5. Darius
    Member
    Posted 2 years ago #

    Sorry, I tested it in my browser yesterday. You can see the problem today on the link I gave to you.

    After a few hours I will also look again into this problem.

  6. kavingray
    Member
    Plugin Author

    Posted 2 years ago #

    Np, please remove the wp-tab-content-wrapper from the css rule, using only the ui-accordion-content as shown above.

    Overflow : visible on inner wrapper will lead to undesired results of having text out of bounds. :)

  7. Darius
    Member
    Posted 2 years ago #

    Hmm, it still does not help :<
    Maybe there is a bug in Java Script? I saw that sometimes there can be problems with Java Script (jQuery for example) code and box-sizing:border-box rule. I say so because if I just disable that rule than all works fine (except that then the theme design is broken).

  8. kavingray
    Member
    Plugin Author

    Posted 2 years ago #

    Yep, maybe. Strange. Does the accordions work as they should, outside the tables?

    Yet this still might be a CSS bug, Could you please switch another style from the wp-ui options to see if this issue disappears? You could also try to negate the box-sizing specifically for the accordion panels with box-sizing : content-box.

  9. Darius
    Member
    Posted 2 years ago #

    Well, that page already used two styles (blue and green), but I have also added one more accordion (this one outside the table) with the default style set to one of jquery styles. This did not help. The accordion outside table behaves the same way.

    I used a different website theme (from elegantthemes.com), that noes not have the box-sizing:border-box set. And then it works as it should - well, almost. Almost - because the missing thumbnails seem to affect the tab size, so some of them had a scrollbar. But this is fixed if I set your plugin to default (then the thumbnails show up).

    It looks like the div.wp-tab-content {box-sizing : content-box;} custom style does the trick for me.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags