flex box inside a flex box with scroll overflow? - html

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.

Related

Bootstrap - Fixed Sidebar in body

Im building a react website and am using Bootstrap 4. On one of my page in the content body I have a two column layout. The left side is a sidebar and on the right is a long column of content. When scrolling I want to keep the left sidebar on top.
Here is a picture for illustration:
My current code works, however when scrolling down the sidebar gets fixed/positioned at the center instead of the top. It looks like it's being aligned as if the header is still above it. Here is my current code:
<div className="header-wrap">
//Header Here
</div>
<div className="container">
<div className="row">
<div className="col-3 position-fixed" id="sticky-sidebar">
//Sidebar here
</div>
<div className="col offset-3" id="main">
//body here
</div>
</div>
</div>
<div className="footer-wrap">
//Footer Here
</div>
My goal is as you scroll, the header leaves the screen (which it already does) the sidebar gets positioned to the top.
for example
try the code
#sticky-sidebar{ position: sticky; top: 0;}
I'm leaving a few resources
https://www.w3schools.com/howto/howto_js_navbar_sticky.asp
https://www.w3schools.com/howto/howto_css_image_sticky.asp

navbar-fixed-top inside parent div with full width

I have a webpage which has a sidebar-nav along the left and a navbar-fixed-top along the top. The sidebar is collapsible by clicking a button which is on the top navbar. The top nav bar starts where the sidebar ends.
That part all works correctly. What is not working is that I can't get the top navbar to take up the full width available to it (excluding the sidebar). In other words when the sidebar is expanded, the top navbar needs to take up all of the remaining width. When the side bar is collapsed, it needs to take up the whole width. This is what I have:
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<!--side bar menu items here-->
</ul>
</div>
<div class="navbar-fixed-top" style="position:relative;">
<div class="navbar" style="position:fixed;">
<!--top navbar items here-->
<!--button to collapse/hide sidebar also here-->
</div>
</div>
<div class="container-fluid" id="page-content-wrapper">
<div class="col-lg-12">
<!--general page content here-->
</div>
</div>
</div>
I have tried adding width:80% to the navbar which works correctly when the sidebar is expanded, but then when you collapse the side bar it still only takes up 80% of the full width. It should expand to 100% when that happens.

Bootstrap columns has separate scrollbars

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.

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