I am looking to create a window that can be divided into two or three areas based on the state of a checkbox. When the box is checked, I want the second area to be hidden and the first area to expand to fill the additional space.
My layout works perfectly for larger screens (>640px): checked box large screens and unchecked box large screens
However, I am facing issues with smaller screens where the second area is positioned between areas 1 and 3: checked box small screens
When the box is unchecked, area 1 does not expand into the available space left by the hidden area 2. Instead, area 3 moves up and centers itself in the now vacant space (grey background): unchecked box small screens
I believe I understand the reason behind this behavior but have yet to find a solution.
Initially, I tried changing the CSS properties using `flex-direction: row`, but this caused the elements to align horizontally instead of vertically. Even attempting to use `flex-wrap: wrap` did not yield the desired result.
The extra grey space above and below area 3 seems to be related to the height setting of the hidden area 2. Although setting it to `display:none` should remove the height from consideration, this was not effective. To address this, I attempted using JavaScript to set the height of the hidden area to 0% when the box is unchecked and the screen size is below a certain threshold. However, even after running the script, the appearance remained unchanged. Additionally, adjusting the height directly through CSS did not resolve the issue as the grey wrapper area persisted.
Below is my attempt at creating a reproducible example, though I am unsure if it provides sufficient detail:
function visCheck (){
if (document.getElementById("hint").style.display=="block"){ document.getElementById("hint").style.display="none";
}
else if (document.getElementById("hint").style.display=="none"){
document.getElementById("hint").style.display="block";
}
else{ document.getElementById("hint").style.display="block";
}
}*{
box-sizing: border-box;
}
body{
margin: 0;
height: 100vh;
width: 100%;
}
main{
height: 100%;
box-sizing: border-box;
}
.maingrid-wrapper{
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: wrap;
position: relative;
display: flex;
width: 100%;
height: 100%;
}
.maingrid-content{
/* border: red solid; */
}
.image{
flex:2 1 60%;
flex-grow:2;
height: 90%;
background-color: lightblue;
}
.sidehint{
background-color: lightgreen;
flex:1 1 40%;
height: 90%;
}
.footer-wrapper{
background-color: lightpink;
height:10%;
width: 100%;
display: flex;
flex-direction: row;
}
@media all and (max-width: 640px){
.maingrid-wrapper{
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: wrap;
position: relative;
display: flex;
width: 100%;
height: 100%;
background-color: lightgrey;
}
.maingrid-content{
/* border: red solid; */
box-sizing: border-box;
}
.image{
height: 70%;
flex:1 1 100%;
flex-grow: 2;
background-color:lightblue;
}
.sidehint{
height: 20%;
background-color: lightgreen;
}
.footer-wrapper{
height:10%;
width: 100%;
display: flex;
background-color: lightpink;
}
}<body>
<main>
<div class="maingrid-wrapper">
<div class="image maingrid-content">A</div>
<div class="sidehint maingrid-content"
id="hint" style="display:none">B</div>
<div class="footer-wrapper
maingrid-content">
<input class="bulb-input" id="hint-toggle"
type="checkbox"
onchange="visCheck()">C</div>
</div>
</main>
</body>