We're using FullCalendar version 4.3.1. We currently have a problem with the header not properly aligning when scrolling horizontally to the right. It only happens when the scrollbar is fully scrolled to the right.
This is how it should look and how it looks when not scrolled to the right.
This is what happens when I scroll it to the right, but just enough so it won't put it off.
And this is what happens when I scroll it fully to the right. As you can see the header doesn't align with the cells anymore.
My guess is that the body is bigger than the header because of the vertical scrollbar and by scrolling the last part it will fail to align the header with the cells.
Any idea how I fix this?
Related
Here a simplified version of what I got :
https://stackblitz.com/edit/angular-9-0-0-rc-1-scrollable?file=src/app/app.component.html
So for now, I have a horizontal scroll. The 1st left div (blue) is fixed and must not be affected by the horizontal scroll. Only yellow and pink divs are scrollable with horizontal scroll.
What I need now is to set a vertical scroll. This scroll must allow to scroll both blue and pink divs, the yellow one must be fixed, not affected by vertical scroll.
I don't know how to accomplish this.
My app use Angular 9. I've tried to set a vertical scroll in both blue and pink divs, and synchronise them together but it's not ok as there's a small time between the moment that user scrolls in a div and moment that the scroll is reported to the other div, and I need it to be seamless.
I tried with the cdkScrollable, same issue.
Also this page can contains a huge amount of data, latence is expected, so I cannot rely on scroll synchronization.
Any idea?
Many thx
I have a scenario with flex wrapper that contains header and content wrapper with overflow:auto. If the content wrapper has vertical scrolling, there is the following issue (in Chrome only):
The content can ends behind the vertical scrollbar without displaying horizontal scrollbar. The horizontal scrollbar appears only if the content overflows the border of the content wrapper.
Here is a jsfiddle sample where last letters of the first <li> are not visible. Even though there is not horizontal scrollbar. It appears after you add more letters.
Could you advice me for some workaround?
I have a vertical menu inside a header. The header takes the whole width and height of the screen/window. It is also fixed on top. However when the height of the menu is bigger than that of the screen it get cuts off and I cannot scroll to see the rest of it. This does not happen when the header is not fixed but I want it to remain that way.
Here is a photo of the menu normally
Normal menu
and here is a photo when cropped
Menu cropped
use overflow-y:scroll in css. if that is not working you should be use important .overflow-y:scroll!important . i hope it will be work .
Working on the site www.bedriftsdesign.no I made both the navigation and the #landing-text (on top of the header image fixed.
When I changed their position to fixed though something else happened. Although they'll stay fixed when scrolling vertically, if you scroll horizontally (especially on a small screen) they won't stick to their place.
So my question is, can I make something fixed (vertically) and relative (horizontally)? If so, how?
Here's an example of a site where it works, and approximately what I'm trying to get: www.googleventures.com
Thanks
What I want is sticky footer with 100% width (or footer that stretches horizontally along with opened website), and I want to set a color for it. But when I scroll page I don't want the footer to be stuck at the bottom, I want it to scroll away with page when I scroll it.
Then above the footer I want a 3 (right, left and center-content) column centered layout that has a header and also horizontal navigation bar area. Then outside this layout I could set background a color and also background image that is attached to top.
Is this possible at all? I followed Ryans Faits method but wasn't sure exactly how to put this all together.
Can anyone help me with css and html code? I appreciate your help!
Looks like you're looking for something like this: http://matthewjamestaylor.com/blog/perfect-3-column.htm