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>