CODEWITHSUNDEEP
javascriptcss
brad_fresh
brad_fresh

Reputation: 129

How to hide an element when display: none doesn't work

Here's the deal. I have troubles while trying to hide a paragraph element with a class"text".Link to the pen I've tried display:none but it didn't work for me either.

    <style>
    .img {
      position: absolute;
      left: 40%;
      transform: translateX(-50%);
    }
    .p-wrap {
      color: #fff;
      position: relative;  
      display: none;
    }
    .text {   
      display:none;
      color: #000;
      position: absolute;
      left: -130px;
    }
   </style>

  <div class="img">
   <div class="p-wrap">
     <p class="text"> Oh hey Mark</p>
   </div>
  <img
    src="https://source">
 </div>

Upvotes: 0

Views: 2135

Answers (4)

sunny singh
sunny singh

Reputation: 119

besides from display:none,other alternatives are

  1. visibility: hidden;
  2. opacity:0

But be carefull , with this element is still present in DOM(space is still allocated.)

Upvotes: 4

ANIK ISLAM SHOJIB
ANIK ISLAM SHOJIB

Reputation: 3238

There are multiple ways of hiding an element in CSS. You can hide it by setting opacity to 0, visibility to hidden, display to none or by setting extreme values for absolute positioning. Have you ever wondered why we have so many techniques of hiding an element when they all seem to do the same thing? All of these methods actually differ slightly from each other and this difference dictates which one of them is to be used in a specific situation. This tutorial will cover the minor differences that you need to keep in mind when hiding an element using any of the methods above.

Opacity

The property opacity is meant to set an element’s transparency. It was not designed to alter the bounding box of the element in any way. This means that setting the opacity to zero only hides the element visually. The element still occupies its position and affects the layout of the web page. It will also respond to user interaction as well.

.hide {
  opacity: 0;
}

Visibility

This property is also able to animate as long as the initial and final states have different values. This ensures that the transition between the states of visibility can be smooth instead of being abrupt.

.hide {
   visibility: hidden;
}

Display

All the descendants of our element will be hidden as well. This property cannot be animated so the transition between various states is always going to be abrupt.

Please note, the element is still accessible through the DOM. You will be able to manipulate it just like with any other element.

.hide {
   display: none;
}

Position

Suppose you have an element that you would like to interact with but you do not want it to affect the layout of your web page. No property up to this point can handle this situation properly. One thing that you can do in this situation is to move the element out of the viewport. This way it won’t affect the layout and will still be actionable. Here is the CSS to do that:

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

Clip-path

One more way of hiding elements is by clipping them. Previously, this could be done with the clip property but that has been deprecated in favor of a better property called clip-path. Nitish Kumar recently introduced the clip-path property here at SitePoint, so feel free to check that one out for more advanced usage of the property!

Keep in mind that the clip-path property as used below is not fully supported in IE or Edge yet. If using external SVG files for your clip-path, support is even more limited (that does not apply below). The clip-path property when used to hide an element looks like so:

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

Upvotes: 2

Blind Despair
Blind Despair

Reputation: 3295

You missed a closing quote mark there on a div with class p-wrap, so your DOM is not correctly generated.

<div class="img">
  <div class="p-wrap">
         <p class="text"> Oh hey Mark</p>
  </div>
  <img
    src="https://nypdecider.files.wordpress.com/2018/09/the-room-youtube.jpg?quality=80&strip=all&w=646&h=431&crop=1">
</div>

This will fix it.

Upvotes: 3

ellipsis
ellipsis

Reputation: 12152

Use visibility:hidden

.img {
  position: absolute;
  left: 40%;
  transform: translateX(-50%);
}
.p-wrap {
  color: #fff;
  position: relative;  
  display: none;
}
.text {   
  visibility:hidden;
  color: #000;
  position: absolute;
  left: -130px;
}
  
<div class="img">
   <div class="p-wrap">
     <p class="text"> Oh hey Mark</p>
   </div>
  <img
    src="https://source">
 </div>

Upvotes: 2

Related Questions