5

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

Improve this question
2
  • 1
    You could try adding a css rule for min-height: 50px; Commented Dec 13, 2018 at 13:22
  • I have edited my answer to show you how to show html properly in your component - just for future reference (rather than using a css hack) Commented Dec 13, 2018 at 13:48

4 Answers 4

Reset to default
8

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

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

Improve this answer

Comments

1

Not overly familiar with vue, but maybe?

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

Improve this answer

Comments

0

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

div {
  background: red;
  margin: 20px;

  min-height: 50px;
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.