Sace Sace - 4 months ago 34
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


Here is your answer;

    activate: function( event, ui ) {