Showing the outline of the inactive tabs

[richard.tiongMember]

Hi Peter,

The default configuration of your tab widget will only show the outline of the active tab while the inactive tabs are just presented as texts. One can only see the outline of the inactive tab when the mouse hovers over the text. We want to show the outline of the inactive tabs. Can you show us how to do this?

Best regards,

Richard

[Peter StoevKeymaster]

Hi Richard,

The .jqx-tabs-title CSS class specifies the style of a tab’s default state. In the theme’s CSS file(jqx.base.css), you need to define the style before the selected state as it should be with higher priority

Example:

.jqx-tabs-title, .jqx-tabs-title-hover-top
{
    border-color:#999;  background: #e8e8e8;
}
.jqx-tabs-title-selected-top
{
    border-color: #aaa;
    border-bottom: 1px solid #fff;
    background-color: #fff;
}

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[brandonrohdeMember]

Hi Peter,

I applied this same change because we desired the outline on inactive tabs. How can I get the inactive tabs to not have the space below it though? I tried adding padding-bottom: 4px; to what you recommended before, but that does not push the bottom border in line with the border of the active tabs. It just adds padding within the tab itself.

Thanks,
Brandon

[Peter StoevKeymaster]

Hi Brandon,

To remove the spacing below the tabs, you will need to add the appropriate padding. I suggest you to take a look at the CSS files of our themes, especially the Dark Blue theme where the inactive tabs are with the same height as the active tabs.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[brandonrohdeMember]

Hi Peter,

I checked that theme as well as others, but they all have the same effect. When the outline is showing, there is a 2px gap between the bottom line and the content box below the tabs. The active tab shows correctly. If I increase the padding to match the active tab, it just pads inside of the tab but does not push the bottom border to line up.

[Peter StoevKeymaster]

Hi Brandon,

As you can see in jqx.base.css, the tabs in the default state have padding-bottom: 5px. In the selected state, that padding is 7px. In the hover state it is 5px.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts