I am trying to build a layout that has the following shape:
I am trying to build the layout with tailwind css and flex properties but I can't manage to get the second sidebar right. Either the sidebar scrolls with the content or I cannot scroll the content at all.
My tailwind code roughly looks the following:
<div className="flex">
<div className="h-screen sticky top-0">
{ Sidebar1 code ...}
</div>
<div className="min-h-0 w-full">
<div className="flex gap-x-4 p-5">
<div className="sticky flex-none w-1/5">
{sidebar 2 code }
</div>
<div className="p-5">{content}</div>
</div>
</div>
</div>
I tried playing with overflow properties but cannot get what I want. What am I missing ?
I'm not sure if you meant that the sidebar1 and 2 should always be sticky but I made almost the exact same screen you provided, I added overflow-y-scroll to the content div to it won't overflow
check it here : https://play.tailwindcss.com/SzzWQnn5Fi
In future, it would be helpful to include solutions that have not yet worked.
If I understand your question correctly, you want to make sidebar2 stay fixed in place while you scroll through content. That can be achieved using position: absolute
Positioning with examples is explained here
Related
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
I have a table inside a div that looks like this:
<div fxLayout="row" class="container" fxLayoutAlign="start center">
No related CSS -- I have tried various things but in internet explorer, where I have to use polyfills for anything to work anyway, it will simply refuse to center.
I've found a similar stackoverflow thread but the alignment of the items inside the div was different and didn't really apply to my use case.
I ended up wrapping my whole app in app.component.html like this:
<div class="container"
fxLayout="column">
<div>
<app-navigation></app-navigation>
</div>
<div fxFlexAlign="center" id="routerOutletDiv">
<router-outlet></router-outlet>
</div>
</div>
Then, in my component that I'm trying to center things, my main div where I wrap ALL other divs has the following:
<div fxFlexAlign="center" class="container" fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="15px">
Whilst most of the divs inside this 'parent' have the following:
<div fxFill class="item">
And some of them that had more items inside them, have the following:
<div fxFill fxLayoutAlign="center" class="item">
Also ended up adding fxLayoutAlign="center" to text that had icons inside it, it didn't want to center otherwise. But I did not have to add extra css or touch other properties.
(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 have an image, single character in a span (equal sign), and then a div where child elements are added/replaced via js.
However, I can't for the life of me figure out how to get it all aligned properly (fear I'm over thinking and complicating it.)
I'm using bootstrap's grid (row/col) system as well.
Something akin to...
<div class="container">
<div class="row">
<div class="col-lg-2 col-offset-lg-1">
<div class="response-part">
<img src="foo" />
<span class="opensans">=</span>
<div id="rp1" class="opensans inline" style="width: 50px;">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="response-part">
<img src="foo" />
<span class="opensans">=</span>
<div id="rp2" class="opensans inline" style="width: 50px;">
<span class="opensans">X</span>
</div>
</div>
</div>
</div>
</div>
See jsfiddle
Wanting image centered middle along equal sign (vertical-align) as well as span within neighboring div (and the text in that span appearing just a few pixels off the bottom line.)
I saw this but none of the solutions are addressing the problem for me (I can only guess it is because of the third element and font, etc.)
UPDATE1: Edited sample html to correctly reflect the scenario in which the response-part.div is empty (initial state, possible transition state as user interacts with the page.) Updated fiddle
UPDATE2: I "fixed" the issue occurring with no child elements by adding an initial element in the initial html for the response-part, and then adding one back in when the user removes all other elements. A bit hackish, would appreciate a fix that didn't involve this workaround if possible. Updated fiddle
PS: I initially considered using bootstrap v4 (with flexbox support) but it is still alpha. Alternatively, I also looked into using FlexboxGrid, however I still need bootstrap for other features and FlexboxGrid uses similar classes ("row", etc) as bootstrap, which I assumed would cause name conflicts (if I included both in my project, eg: which "row" class would be used!)
Try using display: flex; on your response-part class. Something like this:
.response-part {
display: flex;
align-items: center;
}
I edited your fiddle. Take a look on it: https://jsfiddle.net/gusLnyyh/6/
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/