Skip to content

Loading…

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

Closed
momsse opened this Issue · 2 comments

3 participants

@momsse

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">
            <ul>
                <li><a href="#tabs-1">First</a></li>
                <li><a href="#tabs-2">Second</a></li>
            </ul>
         <div id="tabs-1">
            Lorem ipsum dolor sit amet
        </div>
        <div id="tabs-2">
            <button>Default</button>
            <button class="ui-button-primary">Primary</button>
            <button class="ui-button-success">Success</button>
            </div>
        </div>
        <!--end tabs-->

        <!--scripts-->
        <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">
            $('#tabs').tabs();
            $('button').button();
        </script>
@valsou

Hello.

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.

@addyosmani
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.