CODEWITHSUNDEEP
htmlcssvue.js
user9945420
user9945420

Reputation:

Show div even if empty

I use Vuejs and have a component with div container which collapses if it's empty.

<template>
  <div>{{ content }}</div>
</template>

<script>
export default {
  name: "myComponent",
  props: {
    content: String
  }
};
</script>

When consuming this component I could go for

<MyComponent content="text to show" />

but what if I want it to be empty? Then the div takes no space and collapses. I want to prevent it.

<!-- This one takes no space -->
<div></div>
<div>This one takes space</div>

I thought about passing a unicode

https://www.compart.com/de/unicode/U+2800

div {
  background: red;
  margin: 20px;
}
<div>&#10240;</div>
<div>This one takes space</div>

but the component does not convert it to a unicode character when receiving a string as a parameter.

Is there a solution using CSS instead of a unicode character?

I created a small example to show the current problem

https://codesandbox.io/s/o5l1kl290y

Upvotes: 5

Views: 2402

Answers (4)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

You could add a non-breaking space (Unicode symbol U+00A0) as the content of a pseudoelement only for :empty divs (and an empty string as alternative text for ATs)

div:empty::before {
   content: "\A0" / "";
}

div { border: 1px #ccc solid; }
<div></div>

or you could set a specific min-height to div:empty

Upvotes: 8

Pete
Pete

Reputation: 58422

You could add a space using an after pseudo element (then it will take the height of the font)

div {
  background: red;
  margin: 20px;
}

div:after {
  content:' ';
  display:inline-block;
}
<div></div>
<div>This one takes space</div>

Or if you want your vue component to show your html you can use

<div v-html="content"></div>

In place of your 

<div>{{ content }}</div>

Updated Sandbox

Upvotes: 3

Snake Eyes
Snake Eyes

Reputation: 16764

You can set min-height to 50px (or less)

div {
  background: red;
  margin: 20px;

  min-height: 50px;
}

Upvotes: 0

Fraze
Fraze

Reputation: 948

Not overly familiar with vue, but maybe?

{{ content }} could be {{ content || "&nbsp;&nbsp;" }}

Upvotes: 1

Related Questions