Make a div keeping its size when hiding elements in the DOM

Question

I have dynamically created divs. For some tests, I go for 30 divs.

Each div got a button bar at the bottom. I just want to show this bar, when hovering the div container.

When hiding these elements, the div gets smaller / is shrinking down. I want to keep this bigger size, so only the buttons are hidden but the container keeps its size.

When leaving the div, only the buttons should disappear.

#wrapper{
  padding: 50px;
  background-color: red;
}

#content{
  color: white;
  padding: 10px;
  font-size: 20px;
}

#wrapper:hover .btn{
  display:block;
}

.btn{
  display:none;
}

<div id="wrapper">
<div id="content">
content
</div>
<div>
<button class="btn">
Button 1
</button>
<button class="btn">
Button 2
</button>
<button class="btn">
Button 3
</button>
</div>
</div>

31piy · Answer 1 · 2017-07-18T06:34:48.497

3

Use visibility to control the visibility of the elements. It hides the elements but keeps their occupied area, maintaining the box model, in the page.

#wrapper{
  padding: 50px;
  background-color: red;
}

#content{
  color: white;
  padding: 10px;
  font-size: 20px;
}

#wrapper:hover .btn{
  visibility:visible;
}

.btn{
  visibility:hidden;
}

<div id="wrapper">
<div id="content">
content
</div>
<div>
<button class="btn">
Button 1
</button>
<button class="btn">
Button 2
</button>
<button class="btn">
Button 3
</button>
</div>
</div>

edited Jul 18 '17 at 06:34

answered Jul 18 '17 at 06:23

31piy

23,323
6
47
67

Yes, this is what I needed, but as mentioned above in the comment section, it is really slow, no? – peterHasemann Jul 18 '17 at 06:31
@peterHasemann Please see [this answer](https://stackoverflow.com/a/11757068/2019247). There is no performace impact as far. – 31piy Jul 18 '17 at 06:33

score 2 · Accepted Answer · answered Jul 18 '17 at 06:26

Use visibility instead of display

Visibility will keep the element space. display will remove the space

#wrapper{
  padding: 50px;
  background-color: red;
}

#content{
  color: white;
  padding: 10px;
  font-size: 20px;
}

#wrapper:hover .btn{
  visibility:visible;
}

.btn{
  visibility:hidden;
}

<div id="wrapper">
<div id="content">
content
</div>
<div>
<button class="btn">
Button 1
</button>
<button class="btn">
Button 2
</button>
<button class="btn">
Button 3
</button>
</div>
</div>

That's exactly what I am looking for! But it is really slow, no? I thought it would show/hide instantly — peterHasemann, Jul 18 '17 at 06:30

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

you can try both these methods as per your need:

1, Only CSS

Using opacity.

#wrapper{
  padding: 50px;
  background-color: red;
}

#content{
  color: white;
  padding: 10px;
  font-size: 20px;
}

#wrapper:hover .btn{
  opacity:1;
}

.btn{
  opacity:0;
}

<div id="wrapper">
<div id="content">
content
</div>
<div>
<button class="btn">
Button 1
</button>
<button class="btn">
Button 2
</button>
<button class="btn">
Button 3
</button>
</div>
</div>

1, CSS and JQUERY

Uisng the code in your Q, only added a class test-height

var firstHeight = $('.test-height').height();
$('.test-height').height(firstHeight);
$('.btn').hide();

#wrapper{
  padding: 50px;
  background-color: red;
}

#content{
  color: white;
  padding: 10px;
  font-size: 20px;
}

#wrapper:hover .btn{
  display:block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="content">
content
</div>
<div class="test-height">
<button class="btn">
Button 1
</button>
<button class="btn">
Button 2
</button>
<button class="btn">
Button 3
</button>
</div>
</div>

Hope this helps.ty

Yep, CSS is much faster. peterHasemann, I have made some changes in the code please do check it again. — Jithin Raj P R, Jul 18 '17 at 06:42

Make a div keeping its size when hiding elements in the DOM

3 Answers3

1, Only CSS

1, CSS and JQUERY