I am using the Material UI table in my project and there is an option to have a "stickyheader" where the header stays fixed to the top of the table. I want to do something similar with the footer where it is fixed to the bottom of the table. I don't see an explicit "stickyfooter" option. Is there a way to do this using CSS or something?
Related
I am using the table component from Clarity Design v2. Is there a way to make the vertical header and horizontal header to freeze while scrolling the table or page?
I'm hoping for some help, I have a static navbar along with some buttons on the right, and I have a VERY large table that the users are going to interact with.
The users are most familar with an Excel like view where there is a ribbon (my navbar) on top and the table is scrolled horizontal and vertically as necessary.
I've got the table to fill the page and have the bootstrap static navbar to show however the navbar is overlapping the table headers.
Is there an easy way to fix this overlap?
Here is bootstrap playground link detailing what I currently have.
https://www.bootply.com/iGX9K2KF9a
Sure, give the .table-wrapper a margin-top:50px and that will move it down. Since the navbar is fixed, it's taken out of the flow of the page so the relatively positioned .table-wrapper is still being placed based off the top of the page.
With Bootstrap loaded, the div doesn't expand along with the contents inside. So if I insert an image or enlarge the text, it just kind of...gets squished in or squished out of the div.
http://jsfiddle.net/thomaswtsang/SSmJt/3/
What is it about Bootstrap that causes this to do this?
It looks like the bootsrap css used by you does not have the responsive features.
Please download the bootstrap library from the customize option.
You can have a look at this modified sample. You need to add some structural changes also as defined by bootstrap. You need to place the spanx definitions inside a row element to work correctly.
Is there a "clean" way to make a bootstrap standard 2-column layout with the sidebar (a list of items) long and scrollable and the main content area fixed? I would like to use the main content area to inject ajax content by intercepting the links on the left, so I would like it to stay always visible.
Just add position: fixed to your sidebar class, and style as you see fit. See an example with Bootstrap here: http://jsfiddle.net/eterpstra/nxrpu/1/
I'm trying to implement a design with a shrink-wrapped left bar and a fluid main panel, which will allow as many pictures to be shown as the window width will accommodate, without a horizontal scroll bar.
I'm having massive trouble doing this. When I float:left the control bar, the content of the main panel begins to flow around it. Floating the main panel as well solves this, but causes the content to be shrink-wrapped, meaning that the images tend to be lined up in a single column.
Is there any elegant solution to do this?
I've made a mockup of the problem here: http://jsfiddle.net/PYKwg/2/embedded/result/
Try this: http://jsfiddle.net/CXvRn/10/ It's all in the code:
I wrapped #main in #mainWrapper
I added padding-left 220px to #mainWrapper.
I added float:left to "#top .thing" and "#bottom .thing"
http://jsfiddle.net/CXvRn/29/
here is the most basic jquery version:
You have to set some constants such as the total horizontal padding and the horizontal margin for the #main. you could derive those using jQuery but if they are never going to change them you might as well set them your self and save some lines of code.
If you'd like to do it with jquery you can figure that out here: Padding or margin value in pixels as integer using jQuery
The solution is "overflow:auto" on the main-content section. This establishes a new frame of block flow, which content won't flow out of (under/behind the floated control section). Reference: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
See it in action here:
http://jsfiddle.net/PYKwg/3/embedded/result/
(Thanks Alex)