Sace Sace - 1 month ago 13
CSS Question

How to make jQuery UI Tabs do 'display: flex' instead of 'display: block' on activating a tab?

Here I have a (probably rather simple) problem with my jQuery UI Tabs.

On opening one of the tabs, the panel gets a 'style="display: block;' added to its div, making the panel visible.

HTML after activating a Tab:

<div id="xxx" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="ui-id-2" role="tabpanel" style="display: block;" aria-hidden="false">


To make the menu sitting inside look right, I want to use flex to position the menu items. Unfortunately, all my attempts to set it in the CSS get overwritten by the script and its 'display: block;' .

What can I do to make jQuery UI Tabs add a 'display: flex' instead of 'display: block' on opening a tab?

I tried experimenting with the events provided by jQuery UI, haven't had any success so far, though.

Any help would be greatly appreciated! Thank you

Answer

Here is your answer;

$("#tabs").tabs({
    activate: function( event, ui ) {
        ui.newPanel.css("display","flex");
    }
});
Comments