When the user does things with the app, I want to have an annoying <p> element telling what they just did. So I devised a simple code to show my problem. Every time I put text into my initially empty <p> tag, it pushes everything else on the screen down when it finally has text and height. Is there a way to force the <p> tag to have height and take up its space without the text in it? I have tried putting it in a div and doing a clear fix on it even with no floats. I have tried ::before and ::after with content: "". All of my other attempts have failed as well. I know that I could put some text in it, either a single space or text with the same color as the background to force it to work, but I was trying to find a more elegant solution. Is there one?
const actionButton = document.getElementById("actionButton");
let flashSomeText = function() {
const flashTextEl = document.getElementById("popupText");
flashTextEl.textContent = "You Just Got Paid";
flashTextEl.style.background = "rgb(18, 163, 49)";
flashTextEl.style.color = "white";
let unflashSomeText = function() {
flashTextEl.textContent = ""
flashTextEl.style.background = "white";
flashTextEl.style.color = "black"
};
setTimeout(unflashSomeText, 1500);
};
actionButton.addEventListener("click", flashSomeText);@charset "utf-8";
body {
background: rgb(211, 211, 211);
max-width: 1680px;
height: 100vh;
}
#wrapper {
background: white;
width: 90%;
margin: 0 auto;
min-height: 100%;
}
header>h1 {
font-size: 2rem;
font-weight: bold;
padding: 1rem 0;
text-align: center;
}
#popupText {
width: 200px;
margin: 0 auto;
text-align: center;
}
#actionButtonDiv {
margin-top: 10px;
text-align: center;
}
#footerText {
text-align: center;
}<div id="wrapper">
<header>
<h1>Some Header Text</h1>
</header>
<p id="popupText"></p>
<div id="actionButtonDiv">
<button type="button" id="actionButton">Flash Text</button>
</div>
<footer id="footerText">
<p>Some Footer Text</p>
</footer>
</div>Add a linebreak to your empty <p> tag with <br>
<p id="popupText"><br></p>
Also while unflashing, set the innerHTML (replace .textContent with innerHTML) of this <p> tag to <br>
let unflashSomeText = function() {
flashTextEl.innerHTML = "<br>"
flashTextEl.style.background = "white";
flashTextEl.style.color = "black"
};
Full code:
const actionButton = document.getElementById("actionButton");
let flashSomeText = function() {
const flashTextEl = document.getElementById("popupText");
flashTextEl.textContent = "You Just Got Paid";
flashTextEl.style.background = "rgb(18, 163, 49)";
flashTextEl.style.color = "white";
let unflashSomeText = function() {
// resetting the text content to a linebreak again
flashTextEl.innerHTML = "<br>"
flashTextEl.style.background = "white";
flashTextEl.style.color = "black"
};
setTimeout(unflashSomeText, 1500);
};
actionButton.addEventListener("click", flashSomeText);@charset "utf-8";
body {
background: rgb(211, 211, 211);
max-width: 1680px;
height: 100vh;
}
#wrapper {
background: white;
width: 90%;
margin: 0 auto;
min-height: 100%;
}
header>h1 {
font-size: 2rem;
font-weight: bold;
padding: 1rem 0;
text-align: center;
}
#popupText {
width: 200px;
margin: 0 auto;
text-align: center;
}
#actionButtonDiv {
margin-top: 10px;
text-align: center;
}
#footerText {
text-align: center;
}<div id="wrapper">
<header>
<h1>Some Header Text</h1>
</header>
<!-- replacing empty text with a linebreak -->
<p id="popupText"><br></p>
<div id="actionButtonDiv">
<button type="button" id="actionButton">Flash Text</button>
</div>
<footer id="footerText">
<p>Some Footer Text</p>
</footer>
</div>