Bootstrap 4 scrollbar overflow with sticky-top - html

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>
Codepen
I would like to keep the use of the rows and columns because it's part of a larger grid.

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
Codepen

You can override the default bootstrap css as:
codepen: https://codepen.io/Rishab2019/pen/rNOGBEz
.bg-light{
position:relative!important;
}

Related

Why bootstrap 4 row doesn't expand to full available width?

As I understand flexbox fills available space in width.
I inspected the the row many times and I really do not understand why it does not fill all available space in width. It's display flex + nothing strange here. And as you can see chrome tells that there is a lot of available space to fill.
Before this row div I created another div but only d-flex and background-red; and it worked correct and filled all available width space. While this row doesnt do this. And the question is why?
I also searched internet looking for answer but could not find any.
<div class="container">
<div class="row justify-content-md-center">
<div class="col-10 pb-2 text-justify news_content">
test
</div>
</div>
</div>
https://jsfiddle.net/g1xLhz6r/
Changing the bootstrap class .container to .container-fluid and changing the class .col-10 to .col gives the result you describe. Remember that .col-10 means use 10 of the 12 available columns so puts a 1-column space on either side of that div.
.news_content {
background: yellow;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid"><!-- Change to container-fluid -->
<div class="row justify-content-md-center">
<div class="col pb-2 text-justify news_content">
test
</div>
</div>
</div>
You can also just eliminate the class .container or .container-fluid from the outer div and add the bootstrap class no-gutters to the div with class of row as shown here (you still need to use .col instead of .col-10):
.news_content {
background: yellow;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div><!-- removed class = container -->
<div class="row no-gutters justify-content-md-center"><!-- added no-gutters -->
<div class="col pb-2 text-justify news_content">
test
</div>
</div>
</div>
no-gutters

Align Button in the Vertical Center and Keep it Stationary in Bootstrap

I currently have a bootstrap button that is vertically aligned in a column on the left of the screen. I am using the following code:
<div class="col-sm-1 align-self-center">
<button class="btn btn-primary" type="button">Button</button>
</div>
It looks exactly how I want it to on the page, but I recently noticed that as other modules expand the page downward (I have a collapsable panel in another column), this button shifts down as well. I suspect it continues to align itself with the center of the page as the page's height changes.
My question is whether there was a way to vertically align the button in the center as I currently do but also have it remain stationary should the length of the page change. Any suggestions would be greatly appreciated!
I think your issue requires using a wrapper around the element to give it a static reference in terms of its vertical center.
#wrapper {
height: 500px;
background-color: blue;
color: white;
}
#wrapper a {
margin: 0 auto;
}
<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">
<div class="container">
<div id="wrapper" class="row">
<a class="btn my-auto">Hello!</a>
</div>
<div class="row">
<p>
This is another row, but the one above is centered within the wrapper above.
</p>
</div>
</div>

Is there any way to fixed css height of alert-sucess class of bootsrap3

The main page of an html and css learning project has 3 columns using the bootstrap 3 classes. The first contains a text and a button to copy this text to the clipboard. The second and third have a link.
I tried to configure with the codes below.
Here is a fiddle: https://jsfiddle.net/buhvm3o8/4/
html code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row-fluid">
<div class="col-md-4">
<div id="select_txt" class="alert alert-success">
<strong>some text do copy</strong>
<button class="btn btn-secondary btn-sm" type="button" onclick="copy_data(select_txt)" style="float: right;">
<i class="glyphicon glyphicon-copy"></i>copy</button>
</div>
</div>
<div class="col-md-4">
<div class="alert alert-success">
site1
</div>
</div>
<div class="col-md-4">
<div class="alert alert-success">
site2
</div>
</div>
</div>
</div>
css code:
body {
font-family: "roboto", monospace;
height: 100%;
}
.alert-success {
width: 100%;
min-height: 100%;
text-align: center;
}
My questions are:
How can I set the "col-md-4" correctly so that it is as a column, because as shown in the image below, it is as a row.
How can I set the "col-md-4" to the screen height of anyone looking at it.
Use Bootstrap's Grid system to ensure that your columns are always the proper width. Right now they are set to be 12 units long when the screen size is below medium, and 4 units long at any greater size. Instead, you should have col-xs-4 on you class to force it to be 4 units at every screen size.
The easiest method would be to use the vh unit in CSS. Add a class to the column in question and set the height to height: 100vh which corresponds to 100% of the view height.
Other methods include using Flexbox to force the page width, or the
always troublesome 100%
height attribute. In most cases, in order for 100% height to work, you will
need either (a) all parents of the element to have their height set
to 100% or (b) the direct parent to have a statically defined height
Your fiddle with the updated values and the 100% height method
try adding xs breakpoint for smaller screens:
body {
font-family: "roboto", monospace;
height: 100%;
}
.alert-success {
width: 100%;
min-height: 100%;
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row-fluid">
<div class="col-xs-4">
<div id="select_txt" class="alert alert-success">
<strong>some text to copy</strong>
<button class="btn btn-secondary btn-sm" type="button" onclick="copy_data(select_txt)" style="float: right;">
<i class="glyphicon glyphicon-copy"></i>copy</button>
</div>
</div>
<div class="col-xs-4">
<div class="alert alert-success">
site1
</div>
</div>
<div class="col-xs-4">
<div class="alert alert-success">
site2
</div>
</div>
</div>
</div>
That's the expected behavior of columns in Bootstrap! They collapse when the device's width get shorter. Try expanding your fiddle's preview width and it turns back into a column. That's how we can create responsible websites w/ bootstrap. If you want to dig deeper into it, I suggest reading bootstrap's grid system manual. Instead of column-md-4 you may use col-4 and it will be shown as a column independently of your device's width, for example.
I recommend reading this question. The way height works in CSS is slightly different than width, so what you need is to set a reference on either your html or body tags.

Bootstrap 4.0 - responsive header with image + navbar + full-height body

I am building a responsive page with bootstrap 4 which has a heading/title section with an image of the client's logo, their name and a navbar. All these elements are responsive, i.e. the image shrinks according to screen size and the navbar minimizes on small screens.
Now I would like to have the body also in a responsive way. i.e.: fill the remaining height of the screen with content, use a scrollbar to display all the content if necessary.
But for some reason I cannot figure out how to span the remaining part of the page over the whole height. It is either too large on some larger screens, when it fits perfectly for mobile devices, or it fits perfectly on large screens, but has only half the height it should have on mobile devices.
The page is roughly build with this structure:
<!DOCTYPE html>
<html lang="de" style="height:100%">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Client Name</title>
</head>
<body class="main" style="height:100%">
<div class="container">
<div class="text-center">
<!-- Client image goes here -->
<h1 style="display:inline;margin-left:0.6em;color:#8b7d7b">Client Name</h1>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:#e0eee0">
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#mainnavbar" aria-controls="mainnavbar" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="mainnavbar" class="navbar-collapse collapse justify-content-md-center">
<ul class="navbar-nav">
<li class="nav-item nav-link active">Page A</li>
</ul>
</div>
</nav>
<div class="container" style="height:70vh">
<div class="row" style="height:100%">
<!-- Main body of page -->
<div class="col-sm-1 col-md-9" style="height:100%">
<p class="col-scrol">
<!-- Main part of the page. Content should have full height and scroll vertically if necessary -->
</p>
</div>
<!-- Comment section (scrolling) -->
<div class="d-none d-md-block col-md-3 comment-section">
<!-- Comment section at the left hand side of the page -->
</div>
</div>
</div>
</body>
</html>
I created a plunkr which actually shows the whole page:
https://plnkr.co/edit/GQHoephQyx3hoejgkT4k?p=preview
What is the correct way, with bootstrap 4.0, to display the page as desired, i.e. use the full remaining height which is left when the image shrinks/grows depending on screen size?
EDIT for clarification:
The content itself should have a scrollbar, but not the whole page. I.e. the header with the image and the menu bar should always stay visible, while the content which comes afterwards should have a scrollbar, if necessary.
Instead of setting defined heights, use flexbox to make the content area fill the height of it's parent container (which in this case is the body).
body {
display:flex;
flex-direction:column;
}
.flex-fill {
flex: 1 1 auto;
}
.flex-shrink {
flex-shrink: 0;
}
https://codeply.com/go/fKNRvG0Hak
Note: The flex-fill utility class will be included in the next Bootstrap 4.2 release: https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9
Similar questions:
Bootstrap 4 make nested row fill parent that has been made to fill viewport height using flex-grow
Bootstrap 4 Navbar and content fill height flexbox
Bootstrap 4 page wide header bar above navbar

Bootsrap column width wider then image

I have a column with a 230x320 placeholder class='img-responsive' image inside it. the image is 230x320, but the column width is col-md-3.
The issue is that the image width is smaller then the column width, so space is left over to the right. Also, when the column is changed to col-md-2, the image turns responsive, thus displays the image smaller than the 230x320 size.
Is there a way to keep this column responsive, but decrease the width of the column, but keep the default bootstrap padding on the right?
Here is the image like so:
I have added the snippet code, but bootstrap is not working, maybe I have my links where they are not suppose to be?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class-="col-md-12">
<form>
<div class="form-group">
<label for="profilephoto" class="col-sm-2 control-label custom-label">Profile Photo</label>
<div class="col-md-3 profile-img"><img src="http://placehold.it/230x320" alt="profile-img" class="img-rounded img-responsive"></div>
<div class="col-md-3">
<img src="http://placehold.it/130x130" alt="avatar" class="img-circle">
<div class="caption">Avatar</div>
<button type="button" class="btn btn-primary btn-md outline btn-block upload-btn">
<span class="glyphicon glyphicon-plus"></span>Upload photo
</button>
</div>
</div>
</form>
</div>
</div>
</div>
Bootstrap's behavior is appropriate based on your markup. From the Bootstrap documentation on the img-responsive class [link]:
This applies max-width: 100%;, height: auto; and display: block;
to the image so that it scales nicely to the parent element.
The behavior you need is not max-width: 100%; but rather width: 100%;, which will scale the image to the full width of the parent element.
This codepen demonstrates the override, however in the final product I recommend adding a custom CSS class to the img tag.