CSS Display:None and Visibility:Hidden

What is the difference between visibility:hidden and display:none?

display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.

visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.

For example:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

Replacing [style-tag-value] with display:none results in:

test |   | test

Replacing [style-tag-value] with visibility:hidden results in:

test |                        | test

CSS display:none and visibility:hidden

Depends. If you need the space to be left blank, that is, the space won't be taken up by other elements below or around it, you'll need visibility: hidden. Otherwise, use display: none, which will allow other elements to move into the element's place.

There's no reason to use both.

display:none; not working but visibility:hidden; does

The only reason for display: none; not to be working is, if it's overwritten by other CSS with higher precedence.

Check if you are using a CSS library like Bootstrap or TailwindCSS that could be overwriting your display: none; rule.

If you need to retain using those libraries, you can try using the !important property like this: display: none !important;

Edit:

After looking at your HTML my initial presumption proved to be true.
The Font Awesome class fa has an inline property display: inline-block; that overwrites your display property.

CSS `display:none` effect on DOM

display: none; will just hide the element, but all the listener events will still be there. It won't be removed from the DOM.
But the difference between visibility: hidden and display: none is that, in first case, the tag and content inside will be rendered, whereas in second case the tag won't be rendered.

visibility: hidden;

div tag is rendered and affecting document flow

display: none;

div not rendered

Using visibility: hidden and display: none together in CSS?

I do not think giving the element visibility: hidden prevents the user copying the information in the table, although this may be browser specific behavior. Have a look at the test I've set up: http://jsfiddle.net/a9JhV/

The results from Firefox 3.6.8 on Windows 7 is

Copy ME!    Don't copy me :(    Copy ME!    Copy ME!
Copy ME!    Don't copy me :(    Copy ME!    Copy ME!

Which doesn't work as expected.

---

I've cooked up some code, it took the quite a bit work of cook up... have a look here: http://jsfiddle.net/a9JhV/7/

It uses jQuery to hide and show the table columns - actually removes them from the DOM, not just play around with their visibility and whatnot. Whee!

IList.Cast typeof(T) () returns error, syntax looks ok

T is not a type nor a System.Type. T is a type parameter. typeof(T) returns the type of T. The typeof operator does not act on an object, it returns the Type object of a type. http://msdn.microsoft.com/en-us/library/58918ffs.aspx

@John is correct in answering your direct question. But the NHibernate code there is a little off. You shouldn't be configuring the ISessionFactory after getting the ISession, for example.

public static T[] LoadObjectListAll()
{
    var session = GetNewSession();
    var criteria = session.CreateCriteria(typeof(T));
    var results = criteria.List<T>();
    return results.ToArray();        
}

Is there an opposite to display:none?

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".

Both display:none and visibility:hidden not working

When you want to change an element css property, you need to access the style object first.

This is how you would get it:

  handleDelete = (note_id) => {
    const id = 'note-' + note_id;
    document.getElementById(id).style.display = 'none';
  }

---

Related Topics