Bootstrap columns has separate scrollbars - html

I have page structured in three parts: left-sidebar, content and right sidebar
<div class="row">
<div class="col-lg-1 sidebar-left">
...(html content)
</div><!-- /.sidebar-left -->
<div class="col-lg-9 col-md-10 col-lg-offset-1">
...(html content)
</div><!-- /.col-md-9 -->
<div class="col-md-2 sidebar sidebar-right">
...(html content)
</div> <!-- /.sidebar-right -->
</div><!-- /.row -->
The problem ocurs when two elements are longer than screen height, and creates separate scrollbars for each elements. Any advice how to make the page with single scroll bar no matter the lenght of the elements?
screenshot of the problem:

This is a pure CSS problem. Both, left and right sidebar maybe have a height defined. So, when the children size exceed the defined height, the parent act. If has overflow: hidden, the exceed part is hidden, if has overflow: scroll or overflow: auto a scroll is added to view all elements.
You need to remove the fixed heights from both sidebars.

Related

flex box inside a flex box with scroll overflow?

I've looked at the similar questions that came up from this title, but they're not quite the same issue I'm having.
https://jsfiddle.net/kx4q1ut8/1/
<div style="display:flex;flex-direction:column;height:100vh;background:gray;">
<div style="background:red; width:100vw;min-height:80px;">Header</div> <!-- Header -->
<div style="background:green;width:100vw;flex-grow:1;display:flex;flex-direction:row"> <!-- outer body container -->
<div style="background:blue; width:140px;height:100%;"></div> <!-- side bar -->
<div style="background:yellow;height:100%;flex-grow:1;display:flex;flex-direction:column"> <!-- inner body container -->
<div style="background:gray;width:100%;height:200px;"> <!-- filter panel -->
</div>
<div style="background:cyan;width:100%;flex-grow:1;overflow:scroll"> <!-- table panel -->
want this content scrollable if beyond bottom of page
</div>
</div>
</div>
</div>
All the areas are fixed sizes except for the cyan area. I need that area expandable to match the rest of the window height. What I also need is for that area to have scrollable content but can't seem to work that part out completely. If you fill the area with enough text it'll get a scrollbar but I think that container is expanding beyond the bottom of the page because I can't fully scroll to see the end of the off-screen content. The layout is for a web application.

Place an element in bootstrap gutter

Bootstrap 4.4.1
How do I place an element a button or any clickable in the gutter between two bootstrap columns.
I have a two panes UI — a left-aside and the main right section, in bootstrap grid columns.
I want to collapse the left aside section via a button in the gutter of the
I was thinking and have tried an absolute div — but to no avail!
<div class="row">
<aside class="col-md-4">
<!------ absolute here -->
</aside>
<div class="col-md-8">
</div>
</div>

Setting height to element with floating elements that can't be cleared

I'm using Bootstrap to make a blog theme in WordPress and I'm encountering an issue with following the structure/classes.
My current markup goes:
<div class="container blog-post">
<div class="row">
<section>
<div class="col-lg-8 col-xs-12">
<article>
[Blog post content]
</article>
</div>
</section>
<div class="col-lg-4 col-xs-12">
<aside>
[Sidebar content]
</aside>
</div>
</div>
</div>
</div>
As illustrated, the <section> height is only affected by the margin and padding, not the content.
Since Bootstrap's col-xx-xx classes are floated left, my section is only accumulating height based on its margin and padding, not the child elements. If I clear the float after the section, then the sidebar doesn't display on the right, like I want it to.
I tried setting the section overflow to hidden and other values, but then the sidebar either cleared to the row below, or the section height didn't change.
Any advice would be appreciated!
you have your layout wrong.
you are seeing what you are seeing because you are not applying a clearfix to that section. and if you do (as you noticed already) the sidebar stacks down the post because <section> is a block element and takes 100% of width space, therefore pushing the sidebar down the dom.
you should either include the sidebar in the section (and apply a clearfix), or float that section as well like so:
section {
overflow:auto;
float:left;
}
i suggest including the sidebar in the section, or removing that section tag all togheter
You should refactor your layout a bit. Bootstrap works fine with row and cols, you just have to make it look something like this
<div class="row">
<div class="main col-lg-8">
/* your content */
</div>
<div class="sidebar col-lg-4">
/* your sidebar */
</div>
</div>

Dynamically adding photos to floated left <div> causing footer to jump up to the header

<div id="page">
<div id="header">
Header goes here.
</div> <!--end of header -->
<div id="main">
<div id="photos">
THIS IS FLOATED LEFT.
Photos are dynamically added here.
</div> <!--end of photos-->
</div><!-- end of main-->
<div id="footer">
Footer goes here.
</div><!-- end of footer -->
</div> <!-- end of page-->
In this code I'm trying to add photos dynamically to the div "photo" which is floated LEFT.
Now what happens when I try to add photos is my footer goes up to the header. The div main has a background color. On adding more photos the photos goes out of the main i.e. outside the color content. I've used clear property for the floating element.
Please, help me understand where am I wrong. Any help would be greatly appreciated.
Try adding this line
<br style="clear: left; margin: 0; padding: 0;" />
</div><!-- end of main-->
<div id="footer"> Footer goes here. </div>
<!-- end of footer --> </div>
<!-- end of page-->
This issue is happening because floated elements don't really occupy any vertical space in the page layout (since other elements are allowed to wrap around them). Since the left-floated div "photos" is the only content within the "main" div, the "main" div is treated as if is has no vertical height. This is why the footer appears directly below the header.
To fix this, you have some options:
Add other content to the "main" div that is NOT floated
Specify a fixed height for the "main" div (not a good solution)
Leave the "photos" div unfloated, and float other content in the main div to the right
Use clear:right or clear:both in the "photos" div css. This mostly defeats the purpose of the float, though
(other options exist)

Can i make this div fill out the remaining space depending on the the sidebars widths?

i have 4 divs inside of a div like this:
<div id="Wrapper">
<div id="CoreSideBar"><!-- a sidebar to the right -->
</div>
<div id="SystemContent">
<div id="SystemNavigation"><!-- will be some kind of "tabnavigation" in the top of this div -->
</div>
<div id="PageContent">
</div>
<div id="SystemSideBar"> <!-- a sidebar to the left -->
</div>
</div>
</div>
I would like the sidebars to have 200px width each and im also going to make it possible to "collapse" the sidebars so you can have more space for the PageContent div if you need it.
What do i need to do to make the PageContent div fill out the remaining whitespace between the CoreSideBar and the SystemSidebar? Is this even possible in all browsers?
Just put your sidebars' markup first, and float: left; or float: right; as desired — the div's default behavior will take care of the rest.
http://css.maxdesign.com.au/floatutorial/tutorial0901.htm
http://phrogz.net/css/understandingfloats.html#incontainers