prevent div from collapsing when hiding or removing all child elements

Question

I created a Vuetify app managing some card items. Before adding the actions / buttons I check the User's permissions. If some permissions are missing these buttons will not be rendered. I created an example here

https://codepen.io/anon/pen/RmMRQb?editors=1010

As you can see the second div collapses because no children is rendered. This problem is not related to Vuetify, so I will reproduce it with default HTML / CSS example.

.container {
  background: red;
}

.box {
  display: inline-block;
  height: 32px;
  width: 32px;
  margin: 5px;
  background: blue;
}

.notRendered {
  display: none;
}

<div id="app">
  <h1>Div with visible elements</h1>
  <div class="container">
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
  </div>
  <h1>Div with hidden elements</h1>
  <div class="container">
    <div class="box notRendered">
    </div>
    <div class="box notRendered">
    </div>
    <div class="box notRendered">
    </div>
  </div>
</div>

I don't want the div to collapse. I already found a solution here

JQuery: Prevent div from collapsing when element hides()

but would like to ask if there is a way to achieve it without using some hardcoded heights or selecting the element's height. I don't want to modify Vuetify's native elements, so maybe there is a trick when the action bar is empty (no children got rendered) and the bar would not collapse.

There's a specific reason, why you don't want to use a min-height (Ex: 40px)? That would be the easiest - just one css rule should be added in that case. — Hunor
Or, if you really don't want to alter the container element's css settings - you should add a secondary class to the container, like: "improved-container". And you can style that one as you wish (giving it a min-height). — Hunor

Hunor Hunor · Accepted Answer · 2019-05-24T07:08:49

I have added a secondary class for the default/native container. I think this is the best/easiest approach.

.improved-container {
  background: red;
  min-height: 40px;
}

.box {
  display: inline-block;
  height: 32px;
  width: 32px;
  margin: 5px;
  background: blue;
}

.notRendered {
  display: none;
}

<div id="app">
  <h1>Div with visible elements</h1>
  <div class="container improved-container">
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
  </div>
  <h1>Div with hidden elements</h1>
  <div class="container improved-container">
    <div class="box notRendered">
    </div>
    <div class="box notRendered">
    </div>
    <div class="box notRendered">
    </div>
  </div>
</div>

prevent div from collapsing when hiding or removing all child elements

1 Answers