I am currently dealing with a situation where text appears conditionally and when it does, it causes the rest of the page to be pushed down.
Does anyone know the best way to reserve the space for this text even when it's not visible so that I can prevent these unwanted push downs?
Absolutely positioning elements or giving fixed heights to containers is not an option for me.
An example code snippet is provided below. Simply click the button to see how 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>