div#myFlexbox{ display:flex; } after hiding it and showing it, it...">
Geek Answers Handbook

JQuery.show () flexible box

I have an item with flexbox

<ul id="myFlexbox"> div#myFlexbox{ display:flex; }

after hiding it and showing it, it is confusing.

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

now the element displays a block instead of flex.

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

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

+32
source share
9 answers

The show() function adds display:block by default for the div . You can change display to flex with jQuery css() :

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

JQuery .show() does not know about your display: flex; (not flexbox). Instead, try adding and removing a hidden class.

CSS:

 #myFlexbox{ display: flex; } .hide{ display: none !important; }

JS:

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

https://jsfiddle.net/p2msLqtt/

Otherwise, you must execute your JS after the CSS is fully loaded and the DOM is ready, I think - for example, like:

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

Updated the fiddle and installed Javascript execution on domready - this works:

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

+14
source

Since other answers did not take into account the possibility of using the duration argument ...

Short answer: Use . Hide to hide the meaning, and this should not be.

A little explanation:

Corresponding elements will be immediately hidden without animation. This is roughly equivalent to calling .css ("display", "none"), except that the value of the display property is stored in the jQuery data cache so that the image can subsequently be restored to its original value . If the element has a display value of flex and is hidden and then displayed, it will again appear as flex.

From the documentation, Changed 'inline' to 'flex' to fit contenxt!

So jQuery knows what you're hiding! If you have hidden it using . Hide , which is, And he knows how to show it again with the correct displayed value.

+4
source

just use

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

when jquery add styl attribit css is added, it works fine on Chrome and Mozilla

+4
source

You must wrap the contents of display: flex element.

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

link your javascript show / hide with '#flexWrapper'

+3
source

The class solution works, yes. Here is another 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" );

Please note that when calling the function, an identifier is not required #.

Example:

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

+3
source

I know that it is already too late (3 years), but I managed to do it.

I created a rule in css for my div, for example #myDiv, which looks like this

 #myDiv[style*='block'] { display: inline-flex !important; }

It takes advantage of what jQuery does with the DOM, it uses 'display: block'. I used inline-flex because I needed it for what I am doing, but it could be anything. Thus, the rule is applied faster, without flickering.

+2
source

The idea is to create a custom showFlex() function similar to jQuery show() and call it with an element that should have 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.

+1
source

JQuery solution should be

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

More articles:


All Articles