0

I know that display: none removes the element from the page while visibility: hidden hides the element but preserves the space.

My question is, is it a good idea to use the two styles together on an element and if so, what is the priority order of the two when used together?

My use case is like so:

  • When shouldRemoveElement = true, Irrespective of shouldHideElement the div should be removed from the page.

  • When shouldRemoveElement = false, the div should respect the visibility style based on the shouldHideElement value.

While this works as expected I'm wondering if it could cause any unexpected side effects.

sample code:

<div className="field-container count-field"
        style={{ display: shouldRemoveElement ? 'none' : true, visibility: shouldHideElement ? 'hidden' : 'visible' }}>
      <customComponent>..</customComponent>
</div>
Priyath Gregory
  • 927
  • 1
  • 11
  • 37

3 Answers3

1

There are no unexpected side effects of using display: none with visibility: hidden, if that's what you're asking. Since display: none removes the element's box from the layout, visibility isn't going to have any effect no matter what value you set it to, because there's nothing left to show or hide.

Once you do return an element to the layout by changing its display property from none, whatever value it had for visibility at the time will resume effect, and the element will continue to affect its surrounding layout by its now-generated box.

See also: CSS Properties: Display vs. Visibility

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
0

Firstly there are no priority level at all. Both are use for different case. You can't override one by another, display: none can't override by using visibility: visible.

Actually answer is present in your question ("I know that display: none removes the element from the page while visibility: hidden hides the element but preserves the space").

display and visibility both are used for different purpose only common feature is both are hide the element from user eye but both keep the element in DOM structure. So in both case you can access the element as a object from DOM tree. That's why we can't say like that display: none remove the element.

We can hide element by another way using opacity: 0 but difference with display and visibility is both are kept away element from mouse events where opacity give us chance to apply all of the mouse events suppose hover, mousedown, mouseup, click etc.

Hanif
  • 3,739
  • 1
  • 12
  • 18
0

whichever CSS is written last will be applicable unless it is defined as !important, display and visibility are two different CSS property you can't priorities between them

Arun Kasyakar
  • 905
  • 8
  • 9