I'm playing around with Tailwind CSS 1.1.2 and wondering how to create a two-column layout where one column is fixed while the other scrolls vertically.
See https://vimeo.com/350933479#t=46s for reference.
The creator of TailwindCSS Adam Wathan made a Slack clone that does exactly what you're looking for, here's a more basic example and an explanation of why it works:
Example:
<div class="h-screen flex">
<!-- Fixed sidebar -->
<div class="bg-gray-600 w-64">
<!-- Sidebar content -->
</div>
<!-- Scroll wrapper -->
<div class="flex-1 flex overflow-hidden">
<!-- Scrollable container -->
<div class="flex-1 overflow-y-scroll">
<!-- Your content -->
</div>
</div>
</div>
Explanation
The parent element has the flex and h-screen classes so it fills the height of the screen.
Inside it the fixed column has some width applied or it could be a flex column that shares some portion of the screen.
The scrollable column is wrapped in a div with the classes flex-1 flex and overflow-hidden to make sure it fills the available space but hides overflowed content.
inside the scrollable wrapper have another div which is your scrollable content area with flex-1 so it expands to the available space and overflow-y-scroll to scroll when overflowed. Here's a slightly more styled fiddle hope this helps.
Related
I am trying to understand how Stripe achieves its layout here: https://stripe.com/docs/payments
That page has a column flexbox div containing 2 child divs: one for the navbar and the second for the main content. The column direction means that the navbar will sit on top of the main content. The navbar does not use sticky and from what I can see it does not use fixed positioning either.
The main content div is a Flexbox with overflow-y: hidden and has 2 child divs: the first for the LHS sidebar and the second for the main page content.
Note that left sidebar and main page content scroll independently and the overall page itself does not scroll at all. Unless I misunderstand what is happening, Stripe appears to be using the overflow-hidden property in the primary div to ensure that the page contents div does not go outside the viewport and hence the overall page is not scrollable. The inner divs use overflow-y-auto to ensure that content inside them is scrollable.
I'm trying to replicate this using the below using Tailwind and Nextjs:
<div class="h-full bg-white" >
<div class="flex flex-col h-full">
<div id="Navbar" class="bg-blue-200">
Navbar
</div>
<div id="MainContent" class="flex flex-auto h-full overflow-y-hidden">
<div>
<div class="flex-grow-0 flex-shrink-0 flex flex-col h-full w-56 bg-green-100">
<div class="flex flex-grow overflow-y-auto overflow-x-hidden">
<div>
<p>lhs</p>
<p>lhs</p>
... lots more content here to ensure page overflow
</div>
</div>
<div>
Sidebar footer
</div>
</div>
</div>
<div class="bg-red-100 w-full">
Content
</div>
</div>
</div>
</div>
However, when I use the above I just get the whole page that scrolls, whereas I'm expecting to see the LHS sidebar containing the list of <p>las</p> elements scroll and LHS sidebar footer and the page as a whole to stay static. There is no change when I add a load of content into the content div. Here's what it looks like: https://play.tailwindcss.com/J6unFAO47B
Whilst I know that I could use a sticky navbar, I'm trying to understand what Stripe is doing in their page and so I want to understand why is my sidebar not scrolling independently of the other areas of the page?
I'm not sure why it's not working in the Tailwind playground - I suspect it's because I'm not setting a height in one of the parent divs. When I do that, it works.
In Nextjs, the solution wast to do this in CSS:
#__next {
height: 100%;
}
This ensures that the height of the top-most div is set to the height of the viewport and then the overflow seems to work fine as a result.
Check out this: My ans. I hope this solves your problem.
I am trying to create a dashboard layout that is a 3 column using Tailwind CSS.
I have - Header on the top, List in middle, and Button at the bottom position. I want the entire component's height not greater than the screen height. In other words, my columns should have a max height of screen height.
Coming to each column, I want a list to be scrollable between header and footer still maintaining that the combined height of the header, footer, and the list should not exceed the screen height.
I am trying to do that using Tailwind CSS but I will be okay if someone can redirect me using regular css as well.
h-screen and flex flex-1 is what you should be focusing on. See demo.
<div class="h-screen flex flex-col">
<header class="flex h-10 bg-gray-200">Header</header>
<div class="flex flex-1 bg-gray-100 overflow-auto">
Long Content
</div>
<footer class="flex h-10 bg-gray-200">Footer</footer>
</div>
I've read a lot of articles describing how to center a img bigger than the div container. But I also need to scroll that image horizontally (specially for mobile devices) and I cannot explain myself the behaviour I get and how to fix it.
I use flex (through bootstrap classes):
<section id="container">
<div class="for-mobile d-md-none d-flex overflow-auto justify-content-center">
<img src="image_bigger_than_div"/>
</div>
<section>
Additionnal css:
.for-mobile img { flex:none }
The image is well centered and I can scroll on the right side but I cannot scroll on the left side. If I change the flex direction to row reverse, the opposite behaviour occurs.
Why? How to fix this please?
Thx
NB:
If I don't "justify-content: center", the img is not centered and I can scroll the full image.
The code is working fine to me I had to close the section tag just as shown in the code snippet.
I also added class img-fluid to the image to make it responsive but if you want to scroll just remove that class.
<section id="container">
<div class="for-mobile d-md-none d-flex overflow-auto justify-content-center">
<img class="img-fluid" src="assets/images/image.jpg" />
</div>
</section>
And I was able to scroll right and left without any problem...
I also believe the CSS code you provided is not needed.
I want to create a fullheight layout with a top navigation bar, middle area and footer. The Top Navigation and Footer should always stay at the top and bottom, respectively. The layout I managed to create looks somewhat like this:
I implemented this with:
<section class="hero is-fullheight">
<div class="hero-head">
<the-navbar></the-navbar>
</div>
<div class="hero-body">
<div class="container">
<dashboard/>
</div>
</div>
<div class="hero-foot">
<tab-navigation></tab-navigation>
</div>
</section>
The problem now is that when I have other elements than the <dashboard/> in the hero-body (like a long list of boxes) the fullheight layout is lost, making the site longer than the display height. How can I make the hero-body div scrollable? I tried adding overflow: auto; but that doesn't work
Apply height or max-height for hero-body and then apply overflow: auto;. May be you can hide overflow-x(overflow-x:hidden) and apply scroll only vertically by overflow-y:auto.
I'm working on a site using the Bootstrap 3.0 framework. I'm trying to get a kind of half border effect where there is a different background for the header and left navigation that wraps around the top and left of the page while the main content would have a darker background that extends from the left navigation infinitely to the right. I have the main content wrapped in a container and I know I'm able to extend backgrounds infinitely to the left and right by placing the content div inside of a div or other element and making that element's width 100% but how would I do this with a specific column that is already inside of a row? The main content is in a row that also has the navigation on the left. The site can be found here... http://jacobbuller.com/testsites/derekdavis/index.html
Please let me know if you have any suggestions!
--- EDIT ---
I'm trying to explain this a little clearer.
Here are two images showing what I have now and what I would like...
Basically I have a the header tag at 100% width and then inside of that I have the content wrapped in the container class to make sure it's center on the page. This way I can make the top header have a different background then the rest of the image. The rest of the page is made up of two columns wrapped in a container div. The problem I am having is making the background for the main col on the right expand 100% to the right. Here is what I would like it to look like...
I want the background of the main content col to extend 100% to the right to give the impression that it's being framed by the top header and left navigation.
Here is a short version of the header...
<header>
<div class="container">
<div class="row">
</div><!--End row -->
</div><!--End container -->
</header>
And the main content...
<div class="container">
<div class="equalHeights-sidenav"><!--equal heights JQuery so left nav is same width as main content -->
<div class="row">
<div class="sidebar-offcanvas col-xs-12 col-sm-3 col-md-3 col-lg-3">
</div><!-- End col -->
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 content">
<div class="row"><!-- start main content row -->
</div>
</div>
There are more rows and col in the main content div but these are the two main divs surrounded it. Let me know what you think the best course of action is... if it's possible at all that is.