I am using Bootstrap v5 and would like to get a grid layout, where one column has position:fixed so that it scrolls with the very long column left to it.
The issue is the following:
Whenever the height of the first row gets too large such that the second row (with the position:fixed column) moves out of the viewport, then also the column ("Some sample content") disappears. For smaller heights, it works as expected.
The example code is:
<div class="container">
<div class="row mt-5">
<div class="col-md-8" style="min-height:200px; border: 1px solid red">
</div>
<div class="col-md-4">
Box1
</div>
</div>
<div class="row mt-3">
<div class="col-md-8" style="min-height:4000px; border: 1px solid red">
</div>
<div class="col-md-4">
<div style="position:fixed">
Some sample content
</div>
</div>
</div>
<div class="row">
<div class="col-md-8" style="min-height:500px; border: 1px solid red">
</div>
<div class="col-md-4">
Box End
</div>
</div>
You can find an example at: https://jsfiddle.net/4cma32k9/1/
Do you have any ideas to resolve it?
Best,
Tom
Use sticky position:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" >
<div class="container">
<div class="row mt-5">
<div class="col-md-8" style="min-height:200px; border: 1px solid red">
</div>
<div class="col-md-4">
Box1
</div>
</div>
<div class="row mt-3">
<div class="col-md-8" style="min-height:4000px; border: 1px solid red">
</div>
<div class="col-md-4">
<div class="sticky-top">
Some sample content
</div>
</div>
</div>
<div class="row">
<div class="col-md-8" style="min-height:500px; border: 1px solid red">
</div>
<div class="col-md-4">
Box End
</div>
</div>
</div>
When I try to fix problem in JSFiddle i just add border and i see already your
Some sample Content
text is positioned by viewport whatever you do. In this point your result is what you want with large screen?
<div class="col-md-4" style="border:1px solid green;" >
<div style="position:fixed; border:1px solid gold;">
Some sample content
</div>
</div>
position:fixed similarty position:absolute both abolute and fixed
take the defined element out of the normal flow. Depends on the relatively positioned parent element.
Maybe some bootstrap problem occurs. Try to figure out without bootstrap codes. give Two or more divs and style it. Then try to shape it and reach what you want, if it is not working , I'll write and try it when I'm available.
Please make you sure, all option you try and give me feedback.
<div>
<div style="position:fixed; z-index:9999;">
do something ....
</div>
</div>
So whatever content is in this div, its position is always in front of other content. If you want the content in this div to be behind the content of another div then you can use z-index:-9999
Related
I have a problem in bootstrap css about container and fluid
This is my code:
<div class="container">
<div class="row">
<div class="col-sm-6" style="border:3px solid black"><- this div still here</div>
<div class="col-sm-6" style="border:3px solid red">this div full to right -></div>
</div>
</div>
<br/>
<br/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" style="border:3px solid black">text here</div>
<div class="col-sm-6" style="border:3px solid red">text here</div>
</div>
I make it on JSFiddle too, please look it for detail:
JSFiddle
my problem is, how to make my col-sm-6 inside container like col-sm-6 inside container-fluid. Or anyone have other way to fix it?
Maybe this post can help you: override bootstrap container width
The idea is basically that you put negative margin on your div.
I'm trying to make some space / gap between 2x col-sm-6 inside an row. Have tried some methods from earlier posts here from Stack Overflow, but none seem to make the right result.
What I have tried:
<div class="row">
<div class="col-sm-6">
<div class="col-md-12 contentpage3">
</div>
</div>
<div class="col-sm-6">
<div class="col-md-12 contentpage3">
</div>
</div>
</div>
Well... this creates the right spacing, but then the left and right sides are not allign with the rest of the page content. To help you guys understand what I'm trying to explain, here is a picture.
Here you can see that the upper white content, the width is what I'm trying to keep for all the elements inside the page. I know its because the extra div I added, because the following code is producing the upper white content box you see in the picture, but then there is no spacing. Have also tried with col-md-5 and an offset of 2 but this creates too much spacing.
<div class="row">
<div class="col-sm-6 contentpage3">
</div>
<div class="col-sm-6 contentpage3">
</div>
</div>
What am I doing wrong?
You can do something like this.
All .col-* elements should be inside row elements.
All .col-* elements should contain content, not be content.
.example {
padding-bottom: 15px;
background: #ccc;
}
.example > .row > div {
margin-top: 15px;
}
.example .inside {
height: 50px;
background: #fff;
border: 1px solid #eee;
}
<div class="container-fluid example">
<div class="row">
<div class="col-xs-12">
<div class="inside"></div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="inside"></div>
</div>
<div class="col-xs-6">
<div class="inside"></div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
Given the following code
<div style="border:solid 5px orange;width:400px;height:400px">
<div style="display:table;border:solid 1px red;width:100%;height:100%">
<div style="display:table-row;border:solid 1px blue">
<div style="display:table-cell;border:solid 1px green;height:100%">
<div style="height:100%;background:yellow;overflow-y:auto">CONTENT
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>sss
</div>
</div>
</div>
<div style="display:table-row;border:solid 1px blue">
<div style="display:table-cell;border:solid 1px green;height:100px">
<div>INPUT</div>
</div>
</div>
</div>
Chrome correctly sizes the CONTENT area by the available size for the table cell while Firefox and IE increase the size of the table cell to fit the content.
How can I make FF/IE behave like Chrome?
Example in Fiddle:
http://jsfiddle.net/2p6Jx/
UPDATE : I cannot use fixed height, the table should change according to it's parent element height and width
Update 2: adding display:-moz-stack solved the issue in FF, now it is just IE (http://jsfiddle.net/2p6Jx/3/)
I change your code and it works in IE/FF/chrome.
<div style="border:solid 5px orange;width:400px;height:400px">
<div style="display:table;border:solid 1px red;width:100%;height:100%">
<div style="display:table-row;height:300px;width:100%;">
<div style="display:table-cell;">
<div style="background:yellow;overflow-y:auto;height:300px;">
CONTENT
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>sss
</div>
</div>
</div>
<div style="display:table-row;height:100px;width:100%;">
<div style="display:table-cell;border:solid 1px green;height:100px">
<div>INPUT</div>
</div>
</div>
</div>
</div>
I am working with Bootstrap 3.0 and would like to accomplish something along these lines
Favorites Add
Where favorites is pulled left and wrapped in an H3 and the add is pulled right and wrapped in an anchor. They are bottom aligned and on the same line.
Here is what I have that is not working:
<div class="vertical-gutter-xs row container">
<div class="row">
<div clas="col-md-6" style="border: 1px solid red"><h3>Favorites</h3></div>
<div clas="col-md-6" style="text-align: right; border: 1px solid red"><a>add</a></di>
</div>
<hr />
</div>
Many thanks in advance.
You could use a pull-right link inside the H3..
<div class="col-md-6"><h3>Favorites add</h3></div>
Demo: http://bootply.com/87773
This should get you most of the way there:
<div class="vertical-gutter-xs row container">
<div class="row">
<div clas="col-md-6" style="float:left; width:50%;"><h3>Favorites</h3></div>
<div clas="col-md-6" style="float:right; width:50%; text-align: right"><a>add</a></div>
</div>
<hr/>
</div>
<div style="width: 800px;border:1px solid black">
<div style="width:100px;height:100px;float:left;border:1px solid black"></div>
<div style="float:left">ssdfsdfsdfsdgfag25w6a4g8w5614w5sge16dgf45d4sdffffffffffffffffffffffffffffffffffffffffffffffffffffff5s4f64s6f456a46f456a456456456f456we4f54we5gf45456v4sd5646sadf54s56f465as4f564as56f</div>
<div style="clear:both"></div>
</div>
It end up like this:
how to fix it
put a width on the 2nd child div. you will also need to put a space in that string as it cannot wrap it across lines.
<div style="width: 800px;border:1px solid black">
<div style="width:100px;height:100px;float:left;border:1px solid black"></div>
<div style="float:left; width: 100px">ssdfsdfsdfsdgfag25w6a4g8w5614w5sge16dgf45d4sdffffffffffffffffffffffffffffffffffffffffffffffffffffff5s4f64s6f456a46f456a456456456f456we4f54we5gf45456v4sd5646sadf54s56f465as4f564as56f</div>
<div style="clear:both"></div>
</div>
Set height to 100 to for main div