I have a mat table with sticky header and the vertical scroll of the page. It works fine until I add more columns dynamically and the horizontal scroll bar appears.
The sticky headers stop working.
is there any way to make it work?
Please see the example:
https://stackblitz.com/edit/angular-hdg9xh
You can set the width and height to the div container wrap around the mat-table. On stylesheet, you can apply something like this:
.example-container {
width: 100%;
height: calc(100vh - 32px);
overflow: auto;
}
Example: https://stackblitz.com/edit/angular-hdg9xh-uxkaeh
Related
I am working on a Shopify Store but I would like to make a this sidebar sticky and scrollable. The reaso to be scrollable is that when using the position: sticky; css callout the sidebar appears to be very big so it is not visible until the end of the page, then at that moment I would love to make it scrollable so we can filter without having to go to the bottom of the page. I have found something like overflow-y: scroll; but does not work together with the sticky thing. I am sharing some example pics: IMAGE HERE 1 IMAGE HERE 2
You might need to add max-height property to the sticky element
like so
.side-nav{
position: sticky;
overflow-y: scroll;
max-height: 100vh;
}
now your sidenav has a max-height of the height of your screen, so it can apply the scroll behavior if the content is larger than the container
I'm attempting to make this hamburger menu (visible when the page width is less than 865px) scroll to show whatever overflows the VH on screens not tall enough to display the whole menu at once. From my understanding by setting a fixed height to the dropdown section itself, something like calc(100vh - *header-strip-height*) combined with overflow-y: scroll; applied to #header_menus should work, however, because the #header_menus div is a child element of the top strip, and the top strip has a defined height, setting overflow-y: scroll; seems to force the dropdown segment to only take up the VH of the strip menu, and scrolls within the confines of the strip menu, instead of taking up the entire right side of the site, of all the solutions I've tried, I have yet to arrive at something that does not interfere with the placement of the body relative to the header, which is represented in the codepen by a placekitten image.
Looking for suggestions on how to allow the dropdown hamburger menu to scroll when it vertically overflows, without breaking the header layout in a way that interferes with the body in any way, ideas?
https://codepen.io/roomwillow/pen/BaWQoVJ
The issue caused by the fixed height set on your navigation.
In order to handle this you can set an absolute position on the menu,
when the viewport is under 865px.
As such:
#header_menus {
background-color: black;
padding-right: 1rem;
padding-left: 2rem;
overflow: auto;
position: absolute;
height: calc(100vh - 5.5rem);
top: 5.5rem;
right: 0;
}
Do make sure to add relative to the parent so it doesn't mess up the page:
#header_right_section {
position: relative;
}
This will make it work.
https://jsfiddle.net/5zjw1b6h/
I have a table that has a set height & am trying to get the horizontal scroll bar to remain sticky (fixed) to the bottom of the page when scrolling vertically - is there anyway I can achieve this? Either pure CSS or involving JS
Try this css
.scrolling {
height: 30px;
margin-top: -30px;
}
I need a vertical navigation that will stretch the entire screen. How can I do this?
Typically, I would set the navigation with:
position: absolute;
height: 100%;
overflow-y: hidden;
but I can't get this to work for me for some reason or another. It shows a scroll bar regardless, and doesn't stretch the entire page--only the height of one viewport. You can view a working example here:
http://solstaging.net/vhosts/dealer-world-delivery/
Add position: relative to your body tag and the #primary will be the full height.
I'm trying to make the main body of my site to have a fixed height (I think!).
Anyway, the site body is just white, with a border of size 1. Basically, the size of the body is determined by what's in it so, for example, it will resize automatically as more things are added.
What I want is vertical scroll bars so the body doesn't extend forever (is that right?). Should I have a fixed body size?
If you want vertical scroll bars you can use this in your CSS;
body {
height: 900px;
overflow-y: scroll;
overflow-x: hidden; /* hides the horizontal scroll bar */
}
What are you trying to accomplish? You sound unsure if you even want the scroll bars; is there a reason you want to show the scroll bars instead of just having the browser handle the scrolling when the content gets larger than the window?
Yes. You need a fixed height
body{
height: your-height;
overflow:auto;
}
will generate scroll bars only when you overflow the area without growing it vertically.
So, in your body create a layer:
<div id="mainbar">
</div>
And using CSS you can set the height:
div#mainbar {
min-height:100px;
overflow:auto;
}
The min-height guarantees the initial height that you need. Once it goes over that, it you will automatically have scrollbars. If you would rather the page itself scroll and the body lengthen, just take out the overflow line from the CSS.
If you want the vertical scroll bars to an inner div on your site (like so you can have a footer visible at all times), simple specify the height of the div:
#inner { max-height: 300px;
}
I think the default for the overflow is to scroll, but if your content is cutting cut off with no scrollbars, you could also set
overflow: auto;