Reserve space for dynamically displayed text
I have text that is displayed conditionally. When the text is displayed, it discards the rest of the page.
What is the correct way to reserve text space even if not shown so that I avoid push downs?
I want to avoid using absolute positions and giving a preset height to the container.
Fragment added. Just press the button and you will see that the green square is pressed.
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>
source to share
You can achieve what you want by setting a CSS property visibility
on the element.
Setting this property to hidden
will hide the element from view while preserving the space it will use when visible. You can make it visible by setting visibility
in visible
Look here MDN docs .
source to share