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?
Related
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?
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.
the question is a bit more complex than the title can describe. I'm trying to make something like this:
There's a one page layout with content sections. Each section is 100vh, some of them are taller. When user scrolls down or swipes an animation occurrs sliding to a next section. When in a taller section user scrolls freely unless at the bounds of the section, then an animation occurrs.
I've come up with an idea that the browser's scrollbar should be something of a controller, that means it should indicate a position value that would be translated by JS to proper animation. I've created a fixed positioned container with the sections over page's body with its height set to the total sections height so the scrollbar indicates proper values.
The problem is I think I don't want the scrollbar to be visible, because it makes a little paradox when dragging it. Also there will be some content sliding in from the side with its own scrollbar. I think I can hide the scrollbar by doing some tricks if the scrollbar is in a div, not window, but it looks like when a fixed container is in a container with a scrollbar the scroll doesn't happen when the mouse is over the fixed container.
So now I'm stuck between having a window scrollbar and not being actually able to scroll over fixed container. I'd appreciate any help so much. Cheers!
some html just for codepen links to work:
<div class="fixed">
<div class="section-container">
<div class="section"><h1>section 1</h1></div>
<div class="section"><h1>section 2</h1></div>
<div class="section"><h1>section 3</h1></div>
</div>
</div>
codepen example with body scroll
codepen example with container scroll
You added scroll before fixed so it doesn't matter if you have scroll or not it is fixed so you cant scroll over fixed area only under.
I have a fixed header, footer, sidebar on a webpage and I want to set it up so ONLY my content div scrolls with the browser scrollbar. The problem I am experiencing is as follows:
Because my header in made up of transparent elements the scrolling text shows behind my header. How do I hide the scrolling text so that it is only visible within the fixed container div that wraps it?
I would like to solve this problem using css only! If possible :)
You'll want to set your header and footer parent divs (or other block elements) as position: fixed
I would like an element fixed to the top of the viewport, when the user scrolls down the page it remains at the top of the viewport... easy. If the window is narrower then 960px the horizontal scrollbars appear. If the window is scrolled horizontally I would like the content inside this fixed element to scroll with it.
Please check out the demo, the two green boxes should always line up. Make your window narrow and scroll horiz, notice how they no longer line up.
Is this possible without JavaScript? Should work in IE7+ and not totally break in IE6.
http://www.louiswalch.com/beta/t/_scrolltest4.html
I don’t think you can achieve that without JavaScript.
position: fixed means that the element is positioned relative to the viewport. You want that vertically, but you don’t want it horizontally. I don’t think there’s any way to achieve that in CSS.
You can't have position:fixed on an overflow scrolling content. You need to use JavaScript for this. i answered a similar question using jQuery at Fixed header inside scrolling block where a div is fixed even if content is scrolling by overflow.
Check working example at http://jsfiddle.net/VswxL/3/