CODEWITHSUNDEEP
javascriptcssvue.js
LiranC
LiranC

Reputation: 2480

reserve space for dynamically appearing text

I have some text that shows up conditionally. When the text is showing, it pushes down the rest of the page.

What is the correct way to reserve the space of the text even when it's not shown so that I avoid the push downs?

I want to avoid using absolute positions and giving pre-fixed height to a container.

Snippet is attached. Just click the button and see the green box gets pushed.

new Vue({
  el: "#app",
  data: {
    message: "hello",
    push:false
  }
});
button{
  display:block;
}
#push-down{
  height:100px;
  width:100px;
  background-color:green;
}

p{
  font-size:30px;
  margin:0;
}
<script src="https://unpkg.com/vue"></script>
<div id="app">
  <button @click="push=!push">click me to push</button>
  <p v-show="push">{{message}}</p>
  <div id="push-down"></div>
</div>

Upvotes: 4

Views: 3156

Answers (2)

Pineda
Pineda

Reputation: 7593

You can achieve what you want by setting the CSS property visibility on the element.

Setting this property to hidden will hide the element from view whilst maintaining the space it would use when visible. You can make it visible by setting visibility to visible Check out the MDN docs here.

Upvotes: 3

enapupe
enapupe

Reputation: 17059

If you know the element's height you could just wrap it on a div with defined height.

Upvotes: 0

Related Questions