Skip to content


Class primary success, error (etc...) are ignored on tabs panel. #98

momsse opened this Issue · 2 comments

3 participants


Classes for buttons are ignored as soon as it is integrated into tabs. The buttons have the same style then (gray by default).

        <!-- Tabs -->
        <h2 class="demoHeaders">Tabs</h2>
        <div id="tabs">
                <li><a href="#tabs-1">First</a></li>
                <li><a href="#tabs-2">Second</a></li>
         <div id="tabs-1">
            Lorem ipsum dolor sit amet
        <div id="tabs-2">
            <button class="ui-button-primary">Primary</button>
            <button class="ui-button-success">Success</button>
        <!--end tabs-->

        <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
        <script type="text/javascript">


This is a CSS problem. You need to modify the CSS custom file.

For each style of button (primary, success & error)
-> ".ui-button-primary" to ".ui-button-primary, .ui-tabs .ui-button-primary"
-> ".ui-button-success" to ".ui-button-success, .ui-tabs .ui-button-success"
-> ".ui-button-error" to ".ui-button-error, .ui-tabs .ui-button-error"

Same thing for dialog issues. You just have to add
-> ".ui-dialog-content .ui-button-primary"
-> ecc.

Have a nice day.

jquery-ui-bootstrap member

We should be bringing these changes in. Thanks for highlighting.

@addyosmani addyosmani closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.