I have an browser app that dynamically shows content that can be shorter or longer than the available screen size.
On desktop browsers, this causes vertical scrollbar to appear/disappear, which makes the content "jump" left and right.
To avoid this, I add style="overflow-y: scroll" to the body tag, which forces the scrollbar to always display - the scrollbar is just disabled if the content is shorter than the screen.
The problem comes when I use the material-ui SwipeableDrawer component to show a sliding option menu. Viewing the DOM in the browser inspector, it seems material-ui actively removes my overflow-y styling on the body tag when it shows the menu, but then doesn't put it back when it removes the menu.
Example app published on Netlify
Source code
The screen-shot below shows the content is stable at first when the disabled scrollbar is visible, then shows the content jumping left/right after the menu has been displayed.
This only happens on desktop, reproduced with both Chrome and Firefox. It doesn't happen on mobile (iOS, for example) because the scrollbar on mobile devices is displayed "on top" of the content.
I don't want to track what material-ui is doing and add/remove padding - I'm pretty sure material-ui does this behaviour for other components as well (poppers, tooltips, etc.) Tracking all those components and fiddling with padding will be error-prone (not to mention tedious).
Can I somehow make the vertical scrollbar display "on top" of the content like it does in a mobile browser? I'd have to add padding to make sure nothing gets obscured, but at least it'd be static - so once the problem is fixed it'll stay fixed.
One possible workaround is to disable the scroll lock:
<SwipeableDrawer disableScrollLock={true} ... >
A downside of this is that you'll have to remember to do this everywhere you use any material-ui component that has the disableScrolllock functionality - so that means everywhere you use popovers, popups, etc.
But you can override the default props for components. The following worked for SwipableDrawer (because Drawer extends Modal):
export const theme = createMuiTheme({
props: {
MuiModal: {
disableScrollLock: true,
},
},
});
Note: the disableScrollLock setting appears to not be needed anymore with mui (i.e. material-ui version 5) - but you do still need to set style="overflow-y: scroll" in your root body element or somewhere similar.
One possible workaround is to
make the vertical scrollbar display "on top"
by setting the width of the body to the full view:
<body style="width: 100vw;">
This means the body element will extend all the way "underneath" the scrollbar (same as how it works on mobile browsers).
A downside of this is that content that appears on the right hand side of the screen may be obstructed by the scrollbar.
Related
I am testing a free Bootstrap template, and I can't fix an issue that I've found with it: the Header element appears to be wider than the page content, and makes a scrollbar appear at the page, when viewed in a Mobile (400x283) viewport (in Chrome Developer Tools):
https://distracted-jepsen-8ac7db.netlify.app/
Template code: https://github.com/tonysepia/so-theme
I have gone through the following steps to investigate the problem:
Used the Element Selection tool in Developer tools to identify the exact element that is causing the page to grow wide:
The offender is within the <header> tag, as expected
However, none of the Styles that I disable in the Developer Console seem to be able to remove the scrollbar at the bottom of the page!
Questions: What is the next step in troubleshooting such problems, and how can I prevent the header from occupying this extra space and make it align with the page content, without breaking the Desktop view?
hi, i found the issue solution regarding the x axis scroll..its because testimonial slider's navigation buttons are outside the frame ...you can fix this using position:absolute;
One of the pages in my website is having an issue where the page is scrollable on x-position which results the content to be cutoff. Other pages on this website is fine except for this one. I've fiddled with the classes and margin but for some reason I can't get it right.
(Live preview on responsive mode [mobile phones]: http://hub.mymagic.my/idea/frontend/explore)
Need another eye for this. Any help is greatly appreciated.
using chrome's toggle device toolbar + inspect source code, i was able to trace this CSS line on frontend.css:
.cbp .cbp-item {
width: 350px;
...
...
...
}
It seems that this width is making the content to extend beyond the size of mobile browser thus making it appear to be scrollable. I guess you can play or override this value somewhere or replace it with max-width attribute.
I have page based on fullPage.js and Bootsrap. By default is content in section vertically centered. But my content is dynamic and changes on click. It means, that my content has on every click different height and it cause div jumping on page.
Disabling vertical center solve the problem, but only for desktop. On smaller screen (mobiles, tablets) I can't see whole content in section.
With vertical center enabled the section is high as content.
Live example is more than word so:
Example with verticalCenter enabled (not working)
Example with verticalCenter disabled (not working)
Finally the solution was specify container height.
I would encourage you to use the responsiveWidth or responsiveHeight options provided in fullpage.js. That's going to create the best user experience for small screen devices.
But if you still want autoScrolling then you can always go for the scrollOverflow option as in this example and to adjust the scroll bar dynamically you would have to call $.fn.fullpage.reBuild() on any click that changes triggers a change in the section's height.
The menu of the following website https://www.thedegreetracker.com/ has the following issue. The menu seems to be wider than the rest of the page. This is causing a horizontal scroll bar appear at the bottom of my browser's window. When one scrolls over (or maximizes the browser page on a very wide computer screen), it causes other parts of the page, such as the banner and the footer, to disappear when you scroll over.
By way of contrast, the following page does not have the same problem: https://www.thedegreetracker.com/about_us. This second page is how I want the first one to work in terms of the banner and footer resizing correctly, and no horizontal scroll.
As far as I can tell, the HTML and CSS code between the two pages is nearly identical. The differences I have found don't seem to make a difference. I have spent hours trying to figure out what is causing this issue and I am now asking for fresh eyes. I'm using Bootstrap 3 and Laravel, for what it's worth.
I'm hoping this is an easy fix that I'm just missing. You'll probably have more luck using Chrome Dev Tools on the actual web pages to figure this one out, but below is the HTML for both pages. As far as I can tell, the CSS is exactly the same for both pages.
Here's the code from the broken page with the wide menu and horizontal scrolling
view-source:https://www.thedegreetracker.com/login
Here's the code from the page with the menu, banner and footer that work correctly
view-source:https://www.thedegreetracker.com/about_us
The problem is the within the form, not the menu. You have wrongly used the container class (reserved by Bootstrap for setting width of page) inside your form.
Also, your form has a class of .container but you're overwriting the max-width property. This will likely cause responsiveness problems. Try not to touch width, max-width and min-width on classes that a framework uses for setting the width of content and layout, in general. If you must, use an inner-container.
Getting back to your problem, you should have probably used no class at all for your containers inside the form. As a rule of thumb, try to use class names that do not collide with the class names of your framework.
To fix your issue, either remove container from inside your form or, as a general patch for this type of error, add this CSS:
.container .container {
width: initial;
}
I am working with Bootstrap 3.3.1 modals and it was working perfectly until yesterday.
I'm using some modal windows on my page.
One of those modals is more long than the page. In a normal time, Bootstrap transparently hides the body's scrollbar and creates a scrollbar on the overlay. When the user scrolls on the modal, it is stopped when it reach the end. And the body doesn't moves at all.
But, yesterday, I was working on my modals and now it is completely buggy. I have no idea of the thing I introduced that destructs my modals.
First, Bootstrap applies an offset of 15px on the body, even on the small modals that have a height inferior to the screen height.
The content is uselessly shifted.
Second, the body keeps its scrollbar when a modal is displayed. And the overlay also have its scrollbar. So, I have an hideous double scrollbar on my page, and when the user scrolls at the end of the modal, the body scrolls too.
Also, sometimes (yes), the overlay is buggy and it scrolls with the body (so I can see the body without overlay at the bottom of the page).
I have no idea of what can cause this problem since it was working before.
Edit: Here is my code : http://pastebin.com/ePAcjri8. The position of the modals in the page has no effects on this bug (just after <body>, juste before </body>, etc).
I fill the modal content via Ajax when shown.
On JavaScript side, I'm just using .modal('show') then .html(html) to fill them.
Problem solved.
I think this issue can be caused by a lot of different reasons (see topics about this problem on the Internet, but alot have been fixed in Bootstrap releases), but in my case, I just had to remove this in my CSS:
html {
overflow-x: hidden;
}
Hiding the x or y overflow in <html> can cause the apparition of the double scrollbar.