I want to create a faq page like Twitter's FAQ. The left column stays on that position even though the user keep scrolling.
So far here's what I made but it doesn't work.
<template>
<div>header here</div>
<div class="container">
<div class="row">
<div class="col-lg-4">
<div style="position: sticky;">
1 of 2
</div>
</div>
<div class="col-lg-8">
2 of 2
</div>
</div>
</div>
</template>
According to this, we should add sticky property, but it doesn't work.
edit: I think it's because the two columns have the same height, so adding sticky property does not work. Any solutions on how to make the column height fit to the content only?
Any solution? Thank you!!
Position Sticky is not working on col-sm-4 because its parent class row has display:flex property. if you change
display:flex
to
display:block
then position Sticky property will work but it will change your design
Related
(There's a similar question here, but I am too much of a noob yet to translate this onto Bootstrap)
What I want is to have an area on the page between "header" and "footer" (let's call it "body"), which may have a
some fixed section, like BS4 "row", put on the top,
some variable content, consisting of several BS "rows", AND aligned
vertically on the middle of what is left of the body (or of the body
itself)
Can it be done in a responsive manner, and without JS (using only Bootstrap 4 CSS) ?
I've tried some stuff:
<body>
<div id="root" class="container">
<div style="height: 100%;">
<div><h1>HEADER</h1></div><hr>
<div style="min-height: 60%;">
<div class="h100">
<div>some badge</div><br>
<div>
<div class="row justify-content-between">
<div class="col-3">Item #2</div>
<div class="col-3 text-right">
<div>some stats</div>
</div>
</div>
<div class="">
<div class="row justify-content-center">
<div class="col text-center"><h3>THIS SHOULD BE IN THE MIDDLE OF A BLANK SPACE</h3></div>
</div>
<div class="row justify-content-center">
<div class="col-4 text-right"><button class="btn btn-link">it's just below and left</button></div>
<div class="col-4 text-left"><button class="btn btn-link">it's just below and right</button></div>
</div>
</div>
</div>
</div>
</div><hr>
<div class="footer">FOOTER</div>
</div>
</div>
</body>
(https://jsfiddle.net/f93mhdbr/) but as long as I add "d-flex" onto "body" div, or any of it's children, all the previous "row"/"col"-based layout turns into horrible mess ! (see https://jsfiddle.net/f93mhdbr/2/)
I suspect this is due to Bootstrap itself using Flexbox for column and rows,
but maybe any solution exists?
I will try to work on improving this question, I know it's very poor, but I right now I am too much in a despair to work it all out...
UPDATE: added links to whatever I was trying to reproduce
You need to use the flex property to achieve it. Using flex-grow here will make your variable element to grow and fill the remaining height of its container, if there is any. Then all is left to do is set align-items-center on the element to align it on the x-axis.
Here is the Fiddle
Please note I added background-colors so it's easier for you to see how much space each element uses, or use an inspector.
You can set any fixed height for the header, footer and content-top. The height of content and content-remaining will adapt responsively, because they have the property flex-grow: 1 set on them. Here's an example.
To explain further, because the container wrap has a min-height: 100-vh, the content element will grow to fill the entire viewport relative to the rest of the flexible items inside the wrap container. The same logic applies to content-remaining, the only difference is that its parent is the content element and not the wrap container.
As last, I added the IE fix for the min-height property on flex-items. It's a known bug and a quick and reliable fix is to wrap it in a separate flex container.
Hopefully this was helpful to you, if you have any questions left please comment on this answer.
I know Bootstrap is design mobile first. I wonder if the possible layout is possible with just Bootstrap's CSS classes?
Figure A on size col-md or larger
And when screen is col-sm or col-xs, go to B or C. (2 different solutions).
I'm looking for the correct div layouts for A->B and A->C.
The heights for each section are random because the content generated in them will be dynamic. I added heights in the divs just for filler, but they will be dynamic and can't be set.
The following DOES NOT work...
Fiddle ... https://jsfiddle.net/s4jj30wf/
<div class="row">
<div style="background:blue" class="col-xs-12 col-md-4">
<div style="height:100px"></div>
</div>
<div style="background:yellow" class="col-md-8 col-xs-12">
<div class="row">
<div style="background:green" class="col-md-12 col-xs-12">
<div style="height:20px"></div>
</div>
<div style="background:pink" class="col-md-12 col-xs-12">
<div style="height:100px"></div>
</div>
<div style="background:red" class="col-md-12 col-xs-12">
<div style="height:100px"></div>
</div>
</div>
</div>
<div style="background:orange" class="col-md-4 col-md-pull-4 col-xs-12">
<div style="height:50px"></div>
</div>
</div>
Solution: There are 2 ways based on if the columns have static height or dynamic height. If they have static height then we have a pure css solution using the float and clear property as well as margin-top property to achieve this.
Sample pure css with fixed height of columns:
http://codepen.io/Nasir_T/pen/ZBOgoe
If the height is not fixed and dynamic then we will need use of jquery to adjust the margin-top property in order to dynamically kill the gap between the mis-aligned 2 elements based on A->B and A->C scenario. We will be using the default jquery and modernizr js for this simple solution.
Sample jQuery & css solution with dynamic column height:
http://codepen.io/Nasir_T/pen/VmjoPd
Hope this helps.
I think what you maybe looking for is column ordering where you can .push-md- and .pull-md-
In document there is some flow of elements, you can't just mix them as you like unless you position them absolutely.
Using only bootstrap classes, I think the only way how to do that is to duplicate the content - you will have all A, B and C in the page and based on screen size display the one you want - using classes visible-xs, hidden-sm etc.
But duplicating content is usually not wise idea.
I am using bootstrap for making responsive website but when I am giving padding to elements to adjust them in particular column it is breaking in other devices.
I am giving padding in % still it's breaking.
What should I do?
What is the best way to adjust elements within a particular column?
You should keep the grid elements intact. Add children inside them to add padding.
<div class="row">
<div class="col-md-8">
<div class="element-with-padding"></div>
</div>
<div class="col-md-4">
<div class="element-with-padding"></div>
</div>
</div>
I'm trying to design a layout, on which I want to put one div into another. But, the problem is link of the back div is not working.
<div id="container" style="z-index:-10;position:relative;height:100px">
StackOverflow1
</div>
<div id="container1" style="margin-top:10px">
StackOverflow1
</div>
which means, if I'm trying to access link of div id container, then I can't. How to solve this problem.
Note : I can't remove z-index, because I want container1 above of container
Parse has got it right.
Without knowing what context you are using it in, just remove z-index:-10 or change it to a positive value like z-index:1;.
<div id="container" style="position:relative;height:100px;">
StackOverflow1
</div>
<div id="container1" style="margin-top:10px;">
StackOverflow1
</div>
Edit:
I just realised that you said that you wanted to put one div into another. That would be done like this:
<div id="container" style="z-index:1;position:relative;height:100px;background-color:#eee;">
StackOverflow1
<div id="container1" style="margin-top:10px;background-color:#ddd;">
StackOverflow1
</div>
</div>
I put some background-color on the divs to make it clearer.
The answer is, you can't. Because the parent container already been set to z-index:-10, so the child can't have the z-index value higher than that. Maybe you can try change a bit the markup like this one, since you have applied position:relative at the container div there
StackOverflow1
<div id="container" style="z-index:-10;position:relative;height:100px"></div>
<div id="container1" style="margin-top:10px">
StackOverflow1
</div>
Add position:absolute, so the link act like it is inside the parent container with the lower z-index and of course it is accessible. You can see your updated jsfiddle here http://jsfiddle.net/gyheE/2/
How can I get the content div to get at the bottom instead of that odd position?
http://jsfiddle.net/madprops/6FFXL/1/
<div>
<div style='float:left'>name </div>
<div style='float:left'>date </div>
<div style='float:left'>comments </div>
</div>
<div id="contenido" style="font-size:20px;">content</div>
EDIT: removed float:top
It is at the bottom for me in your example, (FF5), but you should probably make it safe by setting content to clear your floated divs, like this:
<div id="contenido" style="font-size:20px;clear:both;">content</div>
Also, the float:top on your first div is invalid, there is no top property of float.