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
Related
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.
I have a top nav, side nav and the main content of the page. On click, the tabs on the side nav should bring the div associated with the tab to the top of the page (This is a different issue i am facing as scrollTop method from JS isn't working, but I am able to use scrollIntoView() for now to get something going)
template
<mat-card class="main-card">
<mat-card-title>Some title</mat-card-title>
<mat-card-content class="main-content">
<div class="div1">Div1 content</div>
<div class="div2">Div2 content</div>
<div class="div3">Div2 content</div>
</mat-card-content>
</mat-card>
CSS
.main-card {
overflow: auto;
height: 700px;
}
.main-content {
height: 1000px;
overflow: auto;
}
sidenav items
<div class="side-nav">
<div class="mat-list-item" (click)="handleElemScroll(div1)">
<span>Div1</span>
</div>
<div class="mat-list-item" (click)="handleElemScroll(div2)">
<span>Div2</span>
</div>
<div class="mat-list-item" (click)="handleElemScroll(div1)">
<span>Div2</span>
</div>
</div>
on the main card, I am unable to add the height prop to, even if I use !important. I've run into this issue with a few other times using angular-material. I am forcing a scroll, but mid way through the scroll, the entire page begins to scroll. Even though the height of my mat-card-content is set to be larger than the mat-card itself.
A few questions if anyone can guide me
1. Why does my entire page begins to scroll mid way?
2. Without making my side and top nav stick, how can I implement a scroll? Is my idea of using overflow, and making the inner container height larger than its parent container the correct idea here?
Thanks for any help
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>
I need to set the position of a table container as absolute based on the <body> container rather than its nearest positioned parent container.
Fixed position is NOT what I want since it positions it based on the viewport and not the main body (this is the expected behaviour for fixed).
Here is a little more details and code showing what I want.
CSS:
#media screen and (max-width: 480px)
I need the <table> content to have an absolute position based on the <body> container
and not the <div id="SearchForm"> container which is the nearest parent with its position set
HTML:
<body>
<div class="page"> <!--position: absolute;-->
<div id="Header"> <!-- position: fixed;-->
<div class="inner">
<div class="header-secondary"> <!--position: absolute;-->
<div id="SearchForm"> <!--position: relative;-->
<form action="......">
....<!--parent search bar form-->
</form>
<table> <!--quicksearch-->
...content <!-- quicksearch results popup-->
</table>
</div>
</div>
</div>
</div>
</div>
</body>
The reason behind this is that when the page is displayed in the mobile view for devices under 480px wide,
The <header> and <div id=searchform> stay fixed at the top of the screen/viewport regardless of scrolling down.
The <table> is the quickview search box that pops up during search showing nearest results.
The problem is, that this causes the quicksearch suggestion box to stay at the top as well. The rest of the page will scroll underneath it, but the suggestion box will stay "fixed" at the top of the screen.
This is somewhat fine if there were just a few results, but when there are more and it extends beyond the bottom of the screen/viewport, there is no way to scroll the suggestion box down to see the rest of them.
I could add a scroll bar for overflow but I want to be able to scroll beyond the quicksearch container and see the content of the main body if I keep scrolling down. As of now, the main content will scroll under the quicksearch results but always remain hidden under it.
if I use position:absolute; it will remain at the top of the screen and I won't be able to scroll down to the results that are offscreen.
If I use position:fixed; then the same thing will happen since it will be positioned based on its viewport and not based on the main body
My only current working option is to have the JS load outside DOM and thus have the ability place it anyway I want it.
This though creates other positioning issues when resizing the window beyond 480px for desktop view mode as it is harder to calculate the offset based on a child container that is deep in the body and keeps resizing dynamically when the window resizes.
Setting the table to position: absolute relative to the body will be impossible as long as any of it's parents has position: fixed.
You will have to move the <table> outside of the fixed header one way or another.
I would use an extra wrapper to be able to switch which element has position: fixed at what viewport width:
<body>
<div class="page"> <!--position: absolute;-->
<div class="ExtraWrapper"> <!-- position: fixed; above 480px -->
<div id="Header"> <!-- position: fixed; below 480px -->
<div class="inner">
<div class="header-secondary"> <!--position: absolute;-->
<div id="SearchForm"> <!--position: relative;-->
<form action="......">
....<!--parent search bar form-->
</form>
</div>
</div>
</div>
</div>
<table> <!-- quicksearch. position: absolute; below 480px -->
...content <!-- quicksearch results popup-->
</table>
</div>
</div>
</body>
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