jQuery .show() a flex box

Question

I have an element with a flexbox

div#myFlexbox{
    display:flex;
}

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

Answer 1

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

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

Answer 2

$('#myFlexbox').show({
    start: function() {
        $(this).css('display', 'flex');
    }
});

Answer 3

The idea is to create a custom function showFlex() similar to jQuery show() and call it with the element which need to have the display:flex; property.

jQuery Solution

$.fn.showFlex = function() {
  this.css('display','flex');
}

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

JavaScript Solution

Object.prototype.showFlex = function() {
    this.style.display = 'flex';
}

document.getElementById('myFlexbox').showFlex();

Hope this helps.

Answer 4

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

Answer 5

You should wrap your display: flex content with an element.

<div id="flexWrapper">
    <ul id="myFlexbox"></ul>
</div>

bind your javascript show/hide to '#flexWrapper'

Answer 6

The class solution works, yes. Here's a different approach I came up with:

Javascript Function

function showFlex(element) {

    var flexContainer = document.getElementById(element);

    flexContainer.setAttribute("style", "display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;");
}

To use it:

showFlex( "yourIDhere" );

Note that the ID doesn't need the # when you call the function.

Example:

https://codepen.io/florantara/pen/aLeyYb/