Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Display HTML child element when parent element is display:none

Tags:

html

css

Is there any mechanism to display a child element when its parent element is display: none?

The situation is a validation error on a hidden tab. I want to surface the error message, even though the field is hidden.

A really simplified JSFiddle of the situation is here http://jsfiddle.net/vLYnk/

Markup:

<ul>     <li>One</li>     <li class="hide">         Two         <ul>             <li class="reshow">Re Show Me</li>             <li>Inner 2</li>         </ul>     </li>     <li>Three</li> </ul> 

CSS:

.hide {display: none} .reshow {display: block !important; position: fixed; top: 0; left: 0;} 

I'm guessing this is impossible as the child would have no context, but just in case???

like image 624
Andiih Avatar asked Oct 18 '12 14:10

Andiih


People also ask

Is display none inherited?

It's because of the way display:none is defined. The child elements aren't inheriting display:none from the parent element. If they were, a child element with display:block !

How do you make an element display none?

To hide an element, set the style display property to “none”. document. getElementById("element"). style.

How do I apply CSS to child element based on parent?

It's easy to apply style to a child element, but if you want to apply style to a parent class that already has child elements, you can use the CSS selector child combinators (>), which are placed between two CSS selectors.


1 Answers

No this isn't possible. display:none hides the element, and thus any child elements will not be displayed.

EDIT:

This might be along the lines of what you want, if you're able to switch from using display to visibility.

.hide {visibility: hidden;} .reshow {visibility: visible;} 

Using this method you can hide the contents of the parent element but show the specific <li> you want. The only caveat is the parent markup will still take up screen real estate. Just won't be shown to the user. That may or may not break the layout you're looking for.

http://jsfiddle.net/vLYnk/2/

like image 190
KP. Avatar answered Oct 04 '22 02:10

KP.