I'm trying to create a table with sticky headers (without using position: sticky. The table also has overflow scrollbars, but this causes multiple issues with the CSS I have right now. I have a working example here: https://codesandbox.io/s/vue-template-1ge8v (html and css are defined in App.vue).
The issues I have with the current CSS are:
Scrolling horizontally, the border-bottom of the header row stops mid-way.
Scrolling horizontally, Heading is not sticky (it should always stay at the same position. (See 3.)
Scrolling horizontally and vertically, the column headers aren't scrolled with the current viewport. The Heading stays sticky though, which is correct behavior.
I've tried multiple variants of overflow, positioning and the like, but couldn't figure out what's wrong with my current CSS.
First issue is happening because there is visibility hidden in line number 31 App.vue file.
Related
I'm trying to make a layout where the header gets scrolled out but the nav and footer are kept. Here's the link to it:
https://play.tailwindcss.com/LiIq5be2Wz?size=360x640
Here's the same code written in jsfiddle: https://jsfiddle.net/cdxqsfu4/
I already have it working but the framework I'll be using this on needs to have an app div. After adding it (or uncommenting it, in this case), only the top:0 part seems to be sticky, not the left:0. Is there a way to fix this?
EDIT: Here are the specifications I need:
The scrollbar should span the entire view, including the header and footer.
The header needs to be hidden when scrolled down.
The nav should be sticky to the top-most and left-most side of the screen.
The nav should span the entire width of the screen.
The footer should be sticky to the bottom-most and left-most side of the screen.
The footer should span the entire width of the screen.
The header needs to be outside of the app div.
The easiest solution would be to change the order of your markup. You should nest your header with the other divs and set one of them to overflow-auto. Doesn't matter which one. Using two overflow-auto's was the only way to get it to work with your previous structure, which loses the header scrolling.
See it working on Tailwind Play.
The issue I am facing right now is that, when I have a navbar with position:sticky and I have a div with position:relative and in that another element with position:absolute then, when scrolling down, the relative div puts itself above the navbar.
I saw another thread that told the op to just use position:fixed but I really want to use sticky because the navbar is below the header and even though I could solve that by using javascript and fixed I'd rather not cause that made the navbar glitch etc. when scrolling to certain points.
Is it possible to have relative elements below sticky ones or is that just simply impossible?
While not scrolling:
While scrolling:
What I'm trying to accomplish:
Try adding z-index: 1 to the navbar and to the slideshow add margin: 40px;
By debugging this web interface, I found an issue about the horizontal view, as you can see in the image below, for horizontal view it need more vertical space, so it need to add a scrollbar, in my case between header and footer, like the old html frame concept. But the scrollbar don't appear, so the form is cutted. how can I fix it?
Also trying to resize it on desktop by following the LINK is without scrollbar.
You are using position: fixed. fixed and absolute both 'remove' the element from its parent, it thus no longer contributes to the height of the body. In my opinion the easiest would be to create a container with a flexbox and center the card that way.
I'm using Angular JS sticky directive to stick the header of a table to the top of the page when scrolling. The table is located in a bootstrap container with a fixed width and when the Angular script activates it shows the whole header and thus overlapping the container in which it is located (if I have enough columns in the table that is).
When I have more columns than what can fit in the container, I get an horizontal scrollbar but this doesn't apply to the sticky header.
Anyone who might know how to fix this? I can't show you any live examples as I don't know how to add Angular directives in fiddle (or any other online compiler).
Here are two screenshots.
This one shows how the container prevents some columns to be shown as the table is wider than the container itself: http://imgur.com/Cj7UBak
This one shows how the sticky header has overlapped the container: http://imgur.com/KkGkOMy
it should not overlap
I'm sorry that I can't give a working demo of it but I simply don't know how to include the Angular JS Directive and without it, a demo would be useless.
EDIT
The problem, I found out, is that the sticky directive sets the position to fixed, which fixes the position to the browser, not to any parent. I don't know how to solve it still but maybe that explains the problem better for everyone.
As I discovered more about the problem I realized that I should rephrase the question. I'm therefore closing this question and refer to this one instead:
Position fixed within container element instead of the browser / viewport
On the following website, www.josecvega.com, I have a navigation bar with years that link to sections on that same page. Unfortunately it is not working they way I hoped, when the user selects a year it moves to the section of the page and puts that section on the top of the page, I have a fixed div on the top of the page that covers the sections and prevents it from properly displaying. What can I do for this to work?
It hard to explain my situation, but it can be seen by going to www.josecvega.com and clicking one of the years.
Put your anchors earlier in the file. Perhaps use a fixed-height element (the same height as your header) in the margin just before each section and apply the anchor to that.
Or use a script run after the jump and scroll back down X pixels.
Or use a frameset to display the fixed header rather than the position:fixed div you are using now.
I would probably do the latter.
your header (class=bannercontainer") is position:fixed
so this element will not scroll.
if you now click on a year it scrolls the page behind the header.
probably position:fixed is not what you want