Issue
I'm using a grid with two rows with the first being fixed to the top of the screen via sticky-top and the second with min-vh-100 so that it fills the remaining height on the screen. Content will be dynamically added to the innerHTML of the second row and I want the user to always have the first row visible as the overflow is handled automatically by a scrollbar.
The first issue is that it creates a scrollbar on document load/ready and you can scroll down so that some of the content (which I think is determined by the stick-top height) in the second row is "hidden" behind the first row. I think this is because of the sticky-top but not sure how to fix it. A scrollbar should only be made if there is overflow in the second row when content is added. I should not be able to scroll down so that content is lost behind the first row.
The second issue is that I want the scrollbar to automatically scroll as content is added to the second row. I tried playing around with the body's scrollTop and scrollHeight but couldn't get it working. In the Codepen example, I should not be able to scroll down so that "Hello" is hidden.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
label:hover {
background: LightGray;
cursor: pointer;
}
</style>
</head>
<body class="bg-light">
<div class="container-fluid">
<form name="form" enctype="multipart/x-www-form-urlencoded" action="/execute" method="post">
<div class="row">
<div class="col">
<div class="row pt-2 pb-4 align-items-center justify-content-center bg-light sticky-top">
<button class="submitbutton btn btn-info" type="submit" name="Help" value="Help">Help</button>
<div class="ml-4 mr-4">
<input class="form-control mt-2" type="text" name="Textbox">
</div>
<button class="submitbutton btn btn-success mr-4" type="submit" name="Go" value="Go">Go</button>
<button id="cancel" type="button" class="btn btn-dark">Cancel</button>
</div>
<div class="row bg-dark">
<code class="pl-4 text-white min-vh-100">Hello</code>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
I would like to keep the use of the rows and columns because it's part of a larger grid.
Solution
The solution I would use (if I'm following you properly) is adding
min-height: calc(100vh - 78px); // Change the px to whatever the sticky-top is
Answered By - Jeff Berlin
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.