Is there an opposite to display none

Question

The opposite of visibility  hidden is visibility  visible   Similarly  is there any opposite for display  none   Many people become confused figuring out how to show an element when it has display  none  since it s not as clear as using the visibility property   I could just use visibility  hidden instead of display  none  but it does not give the same effect  so I am not going with it

User · Answer

visibility hidden will hide the element but element is their with DOM  And in case of display none it ll remove the element from the DOM   So you have option for element to either hide or unhide  But once you delete it   I mean display none  it has not clear opposite value  display have several values like display block display inline  display inline-block and many other  you can check it out from W3C

User · Answer

You can use display  block  Example      lt  DOCTYPE html gt   lt html gt   lt body gt    lt p id  demo  gt Lorem Ipsum lt  p gt    lt button type  button   onclick  document getElementById  demo   style display  none   gt Click Me  lt  button gt   lt button type  button   onclick  document getElementById  demo   style display  block   gt Click Me  lt  button gt    lt  body gt   lt  html gt

User · Answer

In the case of a printer friendly stylesheet  I use the following      screen style     print only   display  none        print stylesheet    div print only   display  block    span print only   display  inline     no print   display  none      I used this when I needed to print a form containing values and the input fields were difficult to print   So I added the values wrapped in a span print only tag  div print only was used elsewhere  and then applied the  no print class to the input fields   So on-screen you would see the input fields and when printed  only the values   If you wanted to get fancy you could use JS to update the values in the span tags when the fields were updated but that wasn t necessary in my case   Perhaps not the the most elegant solution but it worked for me

User · Answer

A true opposite to display  none there is not  yet   But display  unset is very close and works in most cases  From MDN  Mozilla Developer Network    The unset CSS keyword is the combination of the initial and inherit keywords  Like these two other CSS-wide keywords  it can be applied to any CSS property  including the CSS shorthand all  This keyword resets the property to its inherited value if it inherits from its parent or to its initial value if not  In other words  it behaves like the inherit keyword in the first case and like the initial keyword in the second case   source  https   developer mozilla org docs Web CSS unset   Note also that display  revert is currently being developed   See MDN for details

User · Answer

When changing element s display in Javascript  in many cases a suitable option to  undo  the result of element style display    none  is element style display       This removes the display declaration from the style attribute  reverting the actual value of display property to the value set in the stylesheet for the document  to the browser default if not redefined elsewhere   But the more reliable approach is to have a class in CSS like   invisible   display  none      and adding removing this class name to from element className

User · Answer

I ran into this challenge when building an app where I wanted a table hidden for certain users but not for others    Initially I set it up as display none but then display inline-block for those users who I wanted to see it but I experienced the formatting issues you might expect  columns consolidating or generally messy    The way I worked around it was to show the table first and then do  display none  for those users who I didn t want to see it  This way  it formatted normally but then disappeared as needed   Bit of a lateral solution but might help someone

User · Answer

display unset sets it back to some initial setting  not to the previous  quot display quot  values i just copied the previous display value  in my case    display  flex   again after display non   and it overtried the display none successfuly  i used display none for hiding elements for mobile and small screens

User · Answer

The best answer for display  none is  display inline   or  display normal

User · Answer

You can use this display block  and also add overflow hidden

User · Answer

opposite of  none  is  flex  while working with react native

User · Answer

you can use   display  normal    It works as normal     Its a small hacking in css

User · Answer

I use display block  It works for me

User · Answer

Like Paul explains there is no literal opposite of display  none in HTML as each element has a different default display and you can also change the display with a class or inline style etc   However if you use something like jQuery  their show and hide functions behave as if there was an opposite of display none  When you hide  and then show an element again  it will display in exactly the same manner it did before it was hidden  They do this by storing the old value of the display property on hiding of the element so that when you show it again it will display in the same way it did before you hid it  https   github com jquery jquery blob 740e190223d19a114d5373758127285d14d6b71e src css js L180  This means that if you set a div for example to display inline  or inline-block and you hide it and then show it again  it will once again show as display inline or inline-block same as it was before   lt div style  display inline   gt hello lt  div gt   lt div style  display inline-block  gt hello2 lt  div gt   lt div style  display table-cell   gt hello3 lt  div gt    script        a   click function               div   toggle              Notice that the display property of the div will remain constant even after it was hidden  display none  and shown again

User · Answer

display  none doesn   t have a literal opposite like visibility hidden does   The visibility property decides whether an element is visible or not  It therefore has two states  visible and hidden   which are opposite to each other   The display property  however  decides what layout rules an element will follow  There are several different kinds of rules for how elements will lay themselves out in CSS  so there are several different values   block  inline  inline-block etc     see the documentation for these values here     display none removes an element from the page layout entirely  as if it wasn   t there   All other values for display cause the element to be a part of the page  so in a sense they   re all opposite to display none   But there isn   t one value that   s the direct converse of display none - just like there s no one hair style that s the opposite of  bald

User · Answer

The best  opposite  would be to return it to the default value which is   display  inline

[css] Is there an opposite to display:none?

Examples related to css