jQuery .show() a flex box

I have an element with a flexbox

<ul id="myFlexbox">

div#myFlexbox{
    display:flex;
}

after hide it and show it, it gets messed up.

$('#myFlexbox').show();

now the element has a display of block instead of flex.

<ul id="myFlexbox" style="display: block;">

How can I use .hide and .show with flexboxes?

The show() adds display:block as a default for div. You can change the display to flex using jQuery css():

$('#myFlexbox').css('display', 'flex');

JQuery .show() doesn't know about your display: flex; (not flexbox). Instead try to add and remove a hiding class.

CSS:

#myFlexbox{
  display: flex;
}

.hide{
  display: none !important;
}

JS:

$('#myFlexbox').addClass('hide');
$('#myFlexbox').removeClass('hide');

https://jsfiddle.net/p2msLqtt/

Otherwise you have to execute your JS after the CSS is completely loaded and DOM is ready I guess - i.e. like:

<html>
  <head>
    <!-- CSS -->
  </head>
  <body>
    <!-- BODY PART -->
    <!-- SCRIPT TO HIDE AND SHOW -->
  </body>
</html>

Updated the fiddle and set Javascript execution to domready - it's working:

https://jsfiddle.net/p2msLqtt/1/

just use

.class{display: none}

.class[style*='display: block']{
    display: flex !important;
}

when jquery add styl attribut css will be applied, works perfectly on Chrome and Mozilla

Entityframework Join using join method and lambdas

Close VIM session over ssh

Is the function differentiable

Related