Comments (15)
Are you seeing the bug on the documentation site (https://www.muicss.com) or on your own site? Can you paste in the HTML to reproduce it? I checked Firefox 39 on Linux 14.04 and Windows 7 and I'm not seeing bottom scroll bars at least on the documentation site.
from mui.
Both http://rockerboo.net/ and http://discovery.rockerboo.net/ have the issue. I do not think im doing anything special to the styling, but the grid seems to not be the right size for a brief number of width pixels.
Thanks amorey 😃
from mui.
Ok, thanks. I was able to reproduce it in Firefox on OS X. It looks like the problem is being caused by the padding on the <header> element. If you add the padding to the container instead, it should produce the same effect without causing the <header> to overflow.
from mui.
I don't think the <header>
is causing it here. The width on the containers is set to a straight 768px at 768px, which doesn't account for the "dropshadow" on the panels, which causes it to be too big for the window.
from mui.
The panel is inside a container which has a padding of 15px so the panel itself shouldn't cause the overflow on the body. To test out if it's a problem with the panel, you can set the overflow property of the container to hidden to see if the overflow on the body goes away.
The container has a fixed width of 768px until the breakpoint at 768px at which point it has a fluid width (100% of parent) so that shouldn't cause the body to overflow.
Taking a closer look, the scrollbar appears at a viewport width of 777px and disappears at a browser width of 768px. I think what's happening is that at 777px, the container has a fixed width of 768px but the <header> has 1em of padding (10px) for a total width of 778px. At 768px, the container has a fluid width so the <header> no longer causes the body to overflow. So from 777px to 769px, the <header> is wider than the <body>.
from mui.
Thanks for taking an in-depth look. The header element is only one 1 of those 2 sites, and they both have the issue. Removing the whole header element doesn't solve the issue.
I have made an example to showcase it without all the extra things on the page. I was trying to isolate the issue down to some core thing, but it only seems to happen when it scrolls. Removing the width on the .mui-container
for the 768 media query does fix it for me.
No-Scroll:
http://discovery.rockerboo.net/mui.html
Bottom Scroll in a grid:
http://discovery.rockerboo.net/mui-bottom-scroll.html
Bottom Scroll with just text:
http://discovery.rockerboo.net/mui-bottom-scroll-text.html
Thanks amorey 😄
from mui.
@rockerBOO It looks like the bottom scroll in Firefox is happening because Firefox takes into account the width of the vertical scrollbar when calculating the viewport width:
http://www.sitepoint.com/rwd-scrollbars-is-chrome-better/
If a vertical scrollbar is present at a viewport width of 769px then the body width is (769px - scrollbarWidth) while the mui-container width is 768px which causes horizontal overflow.
There are a few solutions to the problem. One solution is to decrease the size of mui-container-sm (and increase the gutter-width to enable a smooth transition from medium to small). Another solution is to compensate for the scrollbar width in JavaScript.
I'd like to spend more time thinking about it so I have a better sense of advantages/disadvantages of each approach. Let me know if you have some thoughts on how to fix the problem!
from mui.
@rockerBOO I subtracted 20px from $mui-container-sm
to compensate for the width of the vertical scrollbar:
https://github.com/muicss/mui/blob/master/src/sass/mui/_variables.scss#L45
That prevents mui-container
elements from causing the <body> to overflow but it also has the side effect of increasing their width from 748px to 767px (100%) as the viewport width transitions past the 768px breakpoint.
Bootstrap used the same solution so I think this might be the best way to solve the problem given the tradeoffs. It's fairly easy to calculate the scrollbar width in JavaScript and add a CSS rule to compensate for it but I'm hesitant to build this into MUI by default since it could cause screen jitter and it'd be better for the app to decide how/when it wants to modify the CSS.
The code is in master and will be part of the next release. Let me know if you have any thoughts.
from mui.
@rockerBOO The scrollbar problem is fixed in v0.1.20 #39
from mui.
Thanks amorey! I think this solution will be good. I have been really busy lately, but I will update to 0.1.21 soon and let you know. 😃
from mui.
Sounds great! Let me know.
from mui.
This seems resolved in my local version, will get it up soon. Will share when its up.
from mui.
Great! Let me know!
from mui.
Looks good. Here is it live now. http://discovery.rockerboo.net/
from mui.
from mui.
Related Issues (20)
- npm run build-e2e-tests fails with an error HOT 2
- WebComponents part is outdated? Should we perfect it? HOT 1
- Label in input form not properly visualized HOT 2
- React Dividers example broken? HOT 1
- Configuration via mocha.opts is DEPRECATED HOT 2
- Clarify or change behavior of Tabs in CSS/JS HOT 3
- How we can update the muicss docs? HOT 3
- Outlined text HOT 2
- Dark mode support via automatic CSS media query prefers-color-scheme HOT 1
- limit size of select menu HOT 4
- Is this repo still being maintained? HOT 1
- Required validation for select HOT 2
- Reset form input validation HOT 4
- select with multiple attribute HOT 2
- Make tab hidden/visible on some criteria HOT 2
- MUI hacked? Github Repo has only a 0.10.2 tag and the website and NPM show a 0.10.3 version. HOT 1
- Support for react 17 HOT 5
- Bugs in negated `in` expressions
- [Autocomplete] How to implement? HOT 1
- Mobile Safari incorrectly warns "Your browser does not support WebComponents" HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui.