I'm coding in Next.js and found out that on each subpages in my project appears unwanted horizontal scrollbar, allowing to scroll about 30px or something. What's interesting is that this scrollbar appears only when content is longer than viewport. I tried to set overflow: hidden to div in Layout component but it seems like the problem is somewhere higher in hierarchy. I also tried setting overflow property to html, body in css but it blocks sticky positioning of header.
Does anyone has idea what should I do?
Related
This is a very weird and specific bug that only happens on Firefox, and I'm having trouble narrowing it down.
I have a page with a sticky menu followed by a fluid container.
In order to remove all padding from the container while keeping everything else untouched (like column gutters), I had to add this CSS to it:
#main-container {
padding: 0;
overflow-x: hidden;
}
This is the only simple way I found to do that, and it works.
If you remove the overflow property, some horizontal scrolling appears.
See https://stackoverflow.com/a/35192643/5845942
But when I pin the menu, scroll until its position becomes fixed, and interact with certain items on the page, vertical space appears on the page, between the menu and the container.
This happens when triggering CSS transitions and other JS DOM manipulations.
Here is a jsfiddle: https://jsfiddle.net/vctls/mac2Ls0d/35/
A screenshot:
And a video:
https://imgur.com/a/28KhPEY
Again, this only happens on Firefox. Chrome handles the layout without any issue.
It doesn't happen either if the menu isn't pinned, or if you remove the overflow property from the container.
This seems to be a Firefox bug. I found a similar issue was already reported:
https://bugzilla.mozilla.org/show_bug.cgi?id=1618029
I'm trying to find a workaround.
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.
Having some trouble with a website. For some reason, there is a horizontal scroll-bar appearing allowing you to scroll a lot towards the right in IE8 even though there is no content there. I may have messed up with width's or margins or something, but it doesn't make sense because when I load the code outside of SharePoint it works fine, even in IE8. In SharePoint, inside a content editor web part, the code makes the horizontal scroll bar (although it doesn't appear in Chrome even with SharePoint).
The following code will hide the scrollbar for me, but you can still scroll to the right. The code just makes the scrollbar invisible.
html {
overflow-x: hidden;
}
Any other solutions would be very much appreciated.
In SharePoint 2010 the main content of the page resides inside s4-workspace Div and the ribbon is kept fixed at the top. So may be you can try to give the overflow attribute to s4-workspace div.
Hello stackoverflow users,
Today I am using the overflow:scroll; property so I can hide all content but allow users to see it with a scroll bar.
See below picture:
You can see that the scroll bars appear even when not needed. Is there a way I can hide the scroll bar until needed, ie when there is actually overflowing content. It is a cosmetic issue for me as the scroll bar at the moment are naturally locked since there is no overflowing content, so why display it (I would prefer it not to be displayed just in case others have different opinions).
Regards
You can use overflow:auto instead of overflow:scroll
With overflow:scroll http://jsfiddle.net/0wekc9p2/1/
with overflow:auto http://jsfiddle.net/0wekc9p2/2/
I would suggest you to set overflow property to auto. or remove the property altogether if it is not inherited.
In your CSS put this code within body tag
body {
overflow:hidden
}
When I was studying the overflow property's values, I came across these two values: auto and scroll, which adds scrollbar(s) if the content overflows the element.
Could someone please explain me whats the difference between them?
Auto will only show a scrollbar when any content is clipped.
Scroll will however always show the scrollbar even if all content fits and you cant scroll it.
overflow: scroll will hide all overflowing content and cause scroll bars to appear on the element in question. If the content does not overflow, the scrollbars will still be visible, but disabled.
overflow: auto is very similar, but the scrollbars only appear when the content is overflowing.
There is a similar explanation of this here, with some screenshots to illustrate the point.
Take a look at CSS Tricks.
Auto will show scrollbar if and only if the content overflows; but scroll will always show the scrollbar, whether the content is overflowing or not.
Adding a point to the answer, Overflow:auto not worked in IE7 when position of the container is absolute Position relative overflow IE7. But setting Overflow:scroll works
overflow: scroll will show both horizontal and vertical scrollbar even when you don't need one or other. while, overflow: auto will show the scrollbar which your div needs. so basically auto will help you to get rid of both scollbar.
Here is more of that:
https://css-tricks.com/the-css-overflow-property/
In Windows, overflow: scroll will always show the scrollbar and overflow: auto will show the scrollbar only if the content is overflowing. In macOS, the overflow: scroll and overflow: auto will always show the scrollbar if the content is overflowing. Tested in Chrome. I highly recommend using overflow: auto as it works the same way and does not generate problems in windows