I'm using Angular Bootstrap UI tabset directive and having some trouble with strange CSS. Here's my HTML, and also a plunker. Why is the div#content wrapping? How to I make it appear directly below the tabs where it belongs?
<div id="left">
floating left div with static height and width
</div>
<div id="right">
<div>standard div with width=100%. presence of tabs is screwing up content below them</div>
<tabset>
<tab>
<tab-heading>Tab 1</tab-heading>
</tab>
<tab>
<tab-heading>Tab 2</tab-heading>
</tab>
</tabset>
<div id="content">
Why is this wrapping below???
</div>
</div>
EDIT: It looks like the CSS class "nav" has a rule ".nav:after { clear:both; }" which is clearing the left float and causing the problem. But I don't know how to fix this still.
Putting a style of display: inline-block on the tabset element seems to fix the problem.
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.
Here is my jsFiddle with full code example.
I am trying to achieve the following to no avail:
I want the glyphicon-globe to appear centered and above the "Community" label (<h1>), and I want all three elements (the glyphicon, the <h1> heading and <h3> subheading) to be horizontally-centered in the middle of the screen
I want the "Community" label to appear with the correct font (see what happens when you remove the glyphicon...)
I have a feeling that the glyphicon is causing both problems:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h1><span class="glyphicon glyphicon-globe"/>Community</h1>
<h3>A free online community to all new fizz-comers.</h3>
</div>
</div>
</div>
Perhaps this is malformed somehow or causing weird CSS rules to fire. Any ideas?
span tags shouldn't be self-closing. Here's a better explanation.
This updated example should style the heading and icon the way you want. By center aligning the text in the H1, the span inside it will also center (if set to display: block). The H1 will take the full width of the container element - setting it to display:inline-block is to make this example look better.
<h1 style="text-align: center; display: inline-block;"><span class="glyphicon glyphicon-globe" style="display: block"></span>Community</h1>
What is required to make links in bootstrap grids work throughout all the media breakpoints ?
In my case, the links work only as long as the grid is not stacked.
This is what the grid looks like:
<div class="row">
<div class="col-md-6">
<a href="#" class="room" style="height: 155.60px; width: calc(25.0% - 4px);"> <span>Item 1</span>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-sm-12">
<p>This is another row</p>
</div>
</div>
</div>
</div>
The working fiddle is here:
http://jsfiddle.net/pTw2j/8/
Edit Thanks for the fast answer. I chose overflow:hidden; at the end to avoid scrollbars while still fixing the issue.
The problem is that the links are floated, resulting in a height of 0 for the parent .storey container.
Setting overflow: auto on the container will fix the problem.
http://jsfiddle.net/pTw2j/13/
.storey {
overflow: auto;
}
This is referred to as "clearfixing." If you're interested in learning more, here are two good articles:
CSS Tricks: Force Element to Self-Clear its Children
David Walsh: CSS Clear Fix
I had the same problem. In my case a better solution was to add the class of "clearfix" to the containing div. Bootstrap has this class built in so you don't have to do anything with your CSS.
Adding overflow:auto will result in a horizontal scroll bar. Best to use clearfix class which resolves the issue.
I am facing with a problem that my top menu overlaps the body. When actually menu must be placed above body.
I've already tried display: block; but it didn't help
Can you look trough it please ?
Here my Demo
Okay, try this. Give the menu div
style="display:table;"
and hope it will solve your issue. Before it doesnot assume any space for div itself, but only for the content and the main div occupies the space right from the top.
Here is the fiddle. I have given there inline css. But I suggest to define a class for menu and put the css in there.
Have you created a container div for the entire page? And then have a background div and a separate menu div?
<div id="page_container">
<div id="background"> Background code
<div id="menu">Menu code
</div>
<div id="body_content">Content in body code
</div>
</div>
</div>
The code goes:
<div id="wrapper">
<div id="content">
<!-- content -->
</div>
<div id="sidebar">
<!-- sidebar -->
</div>
</div>
I apply a background-color to wrapper, but it does not show unless I set a fixed height. Why does it do that considering content and sidebar are filling wrapper? What other ways are there to get the background-color to appear without setting a fixed height?
As someone said in the comments, if their were floated (which they are), then apply overflow: hidden (which worked).
What other ways are there to get the
background-color to appear without
setting a fixed height?
Float #wrapper
Use a clearfix.
Make sure you have content :)
Make sure #wrapper is display:block or inline-block
Add padding
One way to check, besides Firebug, is set border:1px solid red, and see if you get a 2px line or if you see the border as you would expect. If you see the normal border, there is another problem: time to post your CSS.
Here's a quick-and-dirty clearfix you can try for now, see if this helps:
<div id="wrapper">
<div id="content">
<!-- content -->
</div>
<div id="sidebar">
<!-- sidebar -->
</div>
<br style="display:block;clear:both;width:100%" />
</div>