Issue
I have an issue where elements with visibility: hidden;
still take up space, even with max-height: 0;
set, causing the scrollbar to appear on the right.
JSFiddle example
function next(id) {
// list of screens
screens = ["main-screen", "input-screen", "questions-screen", "results-screen", "compare-screen"];
// hide current page, display next page
document.getElementById(screens[id-1]).classList.toggle("hidden");
document.getElementById(screens[id-1]).classList.toggle("visible");
document.getElementById(screens[id]).classList.toggle("hidden");
document.getElementById(screens[id]).classList.toggle("visible");
}
.center {
text-align: center;
height: 100vh !important;
}
.screen {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-family: 'Work Sans';
}
.no-height {
max-height: 0;
}
.visible {
visibility: visible;
opacity: 1;
transition: opacity 0.75s linear;
}
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.75s linear;
max-height: 0;
}
<div class="container center">
<!-- 1. Main Title Screen -->
<div class="screen main-screen visible" id="main-screen">
<p>Find your Archivibe</p>
<button class="btn btn-primary" id="1" onclick="next(this.id)">Begin</button>
<button onclick="document.getElementById('input-screen').style.display='none';">Remove element</button>
</div>
<!-- 2. Input details -->
<div class="screen input-screen hidden" id="input-screen">
<h2>First, some info about yourself</h2>
<div class="form-div">
<form>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name">
</div>
<div class="mb-3">
<label for="region" class="form-label">Region</label>
<input type="text" class="form-control" id="region">
</div>
<div class="mb-3">
<label for="gender" class="form-label">Gender</label>
<input type="text" class="form-control" id="gender">
</div>
<div class="mb-3">
<label for="age" class="form-label">Age</label>
<input type="number" class="form-control" id="age" min="1">
</div>
<button type="button" class="btn btn-primary" id="2" onclick="next(this.id)">Submit</button>
</form>
</div>
</div>
</div>
As you can see in the example, removing the hidden element with the conveniently placed button (reduces) the scrollbar length. In my local workspace this would remove the scrollbar entirely, solving the issue.
Are there any workarounds for this without using display: none;
? Since that would invalidate my fade in transition which I would like to keep. Thank you!
Solution
Try this example I have tried to solve the problem by using overflow: hidden;
* {
margin: 0;
}
.hidden {
max-height: 0;
overflow: hidden;
}
Answered By - Mahesh Prajapati
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.