Last tab "on page, not in line" causing trouble.

  • Resolved SRustveld

    (@srustveld)


    9 years, 9 months ago

    Good evening,
    First of all, thanks for plugin.
    I tried several tab plugins and this one was the best.
    I figured out, a lot by reading and using firebug. But i cant find the solution for this problem:

    https://ronexotischschaafijs.is-best.net/product-info/

    When I press the green tab, things go wrong…

    Can you help me fix this?

    This is what I put in my (Hueman) child theme css.

    #tablist1-tab1 {background: #FFFF00;}
    #tablist1-tab2 {background: #990000;}
    #tablist1-tab3 {background: #FF6600;}
    #tablist1-tab4 {background: #996633;}
    #tablist1-tab5 {background: #FFFF00;}
    #tablist1-tab6 {background: #FF0000;}
    #tablist1-tab7 {background: #00FF00;}
    #tablist1-tab8 {background: #ffffff;}
    #tablist1-tab9 {background: #FF0000;}
    #tablist1-tab10 {background: #FFCC00;}
    #tablist1-tab11 {background: #FF0000;}
    #tablist1-tab12 {background: #CC9933;}

    .responsive-tabs .responsive-tabs__list__item {
    padding: 10px 4px 4px 4px !important;
    margin-bottom: 1px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    text-align: center;
    width: 100px;
    border-left: 1px solid #000000 !important;
    border-right: 1px solid #000000 !important;
    border-top: 1px solid #000000 !important;
    border-top-left-radius: 7px !important;
    border-top-right-radius: 7px !important;
    }
    .responsive-tabs .responsive-tabs__list__item {
    white-space: nowrap !important;
    float: left;
    }
    .responsive-tabs .responsive-tabs__panel {
    clear: left !important;
    }

    https://www.ads-software.com/plugins/tabby-responsive-tabs/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author cubecolour

    (@numeeja)

    You are not using the plugin in the way it was intended to be used when it was created. The plugin was designed to create a single row of tabs and the built-in styles only considered that usage. You have more tabs than can be included in a single line at browser widths greater than the breakpoint that governs whether the tabs or accordion are displayed.

    The directions for customising the css are outlined in the plugin documentation, however the approach you have taken to customise the CSS where you keep the plugin’s default css and include addiotnal rules targeting the tabs in the child theme’s stylesheet is not supported, and apart from any issues that may occur when setting it up, this may also cause problems in the future if the plugin’s default css styles are changed when the plugin is updated.

    The cause of the issue you have mentioned seems to be caused by the left and right padding to the list items making up the tabs.

    If you remove the line:

    padding: 10px 4px 4px 4px !important;*/

    and optionally replace it with:

    padding-top: 10px !important;*/
padding-bottom: 4px !important;*/

    does the appearance improve?

    Thread Starter SRustveld

    (@srustveld)

    Thank u for the response,

    The change didn’t improve the appearance.
    I didn’t know this plugin supposed to be used in a single line.
    cause I’m more the type of guy, first try, then read…
    I will have to figure out some other solution to display the products.

    But I still like your plugin and will continue to use it.

    Thanks, for trying to help me, even I didn’t use your software the correct way.

    Stephano

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Last tab "on page, not in line" causing trouble.’ is closed to new replies.