Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author kavingray

    (@kavingray)

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

    .ui-accordion-content {
        overflow : visible !important;
    }
    Thread Starter Darius

    (@darpla)

    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 :/

    Plugin Author kavingray

    (@kavingray)

    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;
    }
    Thread Starter Darius

    (@darpla)

    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.

    Plugin Author kavingray

    (@kavingray)

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

    Thread Starter Darius

    (@darpla)

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

    Plugin Author kavingray

    (@kavingray)

    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.

    Thread Starter Darius

    (@darpla)

    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.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘[Plugin: WP UI – Tabs, Accordions, Sliders] tabs in accordion shrink due to CSS box-sizing:border-bo’ is closed to new replies.