-
Notifications
You must be signed in to change notification settings - Fork 5.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Reveal] Background content width problem. #7831
Comments
Hello! We need to add more data-options to choose from: This one's will be very useful. If I can help you with that, I will be very happy! :) |
Not sure what you're referring to about width, i'm not seeing anything odd with the widths. |
If Modal opened the background content shift a some pixels bit to the right, this is annoying for most customers. On http://foundation.zurb.com/sites/docs/reveal.html have a look at the right Menu or the Boxes in the main content. The hole content seams to stretch (OSX, Firefox). Solution |
Yes the problem is scrollbar it disappears because of the overflow: hidden property on body. |
Note: If folks aren't seeing this bug, it's probably because their OS/browser uses overlaid scrollbars. This'll be a problem for, say, some Linux systems, certain Windows versions, and other browsers whose scrollbars take up part of the window width. |
thanks @andycochran, I'm not certain there's much we can do for this one, outside of forcing a scrollbar to appear on the html element while concurrently removing one from the body. This is not a nice solution, and it doesn't seem there is a nice solution to this problem after a bit of stackoverflow searching. Any ideas in user land? |
html {
@include breakpoint(medium) {
margin-left: calc(100vw - 100%);
margin-right: 0;
}
} |
My Solution from three post before works nice. |
I'll talk to the team about implementing one of these. |
Going to test @andycochran's solution, mostly need to ensure it doesn't interfere with off-canvas. |
Oh, it won't work in IE9 because IE9 doesn't support viewport units. |
The CSS fix creates a weird padding bug in IE9/10, so it might not be the right solution. |
Erm, http://caniuse.com/#feat=viewport-units says IE9 only doesn't support |
@cvrebert Yep, you're totally right. I'll think before I type next time :) Either way, I need to do further testing to figure out what causes this padding bug I encountered. So far I've only done basic testing in our documentation—when I have time I'll put together an isolated test case. |
Ack! Just reread the post about the technique I proposed. It says:
So that's where the padding bug comes from. This method ain't gonna work. |
I have a work-around. This will the hide the scroll bar for the reveal-overlay which actually doesn't work since there's nothing to scroll and then replace it with the body scroll bar that is already there. This may have downsides, I'm not a developer so I don't really know much. Add this code to your app.scss file
|
try in you css html { .reveal-overlay { |
The CSS fix above is not optimal becuase it doesn't prevent scrolling on the body. The only issue with this is that I had to apply it to to my This was my fix if it helps anyone:
|
I think this "bug" might be too app-specific to fix. |
This problem is described in many places, this one suggests that the bug does not exist in Foundation 5: http://foundation.zurb.com/forum/posts/38019-scrollbar-page-jump-on-reveal-open That may be worth looking into. Also, if there are other modal implementations that don't exhibit this behavior then surely it should be fixable. |
Problem still remains for me in 6.2.4 (best described with @8149). |
What about getting rid of // disable scroll
$.fn.disableScroll = function() {
window.oldScrollPos = $(window).scrollTop();
$(window).on('scroll.scrolldisabler',function ( event ) {
$(window).scrollTop( window.oldScrollPos );
event.preventDefault();
});
};
// enable scroll
$.fn.enableScroll = function() {
$(window).off('scroll.scrolldisabler');
}; |
I'll try a pass on the js solution for 6.3 |
Probably not the most elegant solution, but managed to get it to behave with the below:
Any additional fixed elements will need the padding adding and removing. Like I said not really elegant, it's more for anyone turning up between now and an official solution. |
If we go with a JS solution, wouldn't it be better to prevent scrolling than to mess with unpredictable cross-browser styles? |
@isapir I'm not sure where you'd plug that in. It's just an idea, just a chunk of code lifted from Stack Overflow for addressing this issue, but unrelated to Foundation. |
@andycochran Thanks for clarifying. @kball I opened a PR that resolves this issue, based on https://stackoverflow.com/a/13891717/968244 -- I tested it on Chrome, Firefox, and Edge on Windows, and Chrome on Android, and it seems to work well. For the time being, you can see a working example at https://beta.100candles.com/items.htm (WIP) -- where each item thumbnail opens a Reveal. PR: #10583 |
Does anyone know where the Travis test cases are hosted? My patch works but the test cases need to be adjusted and ATM Travis shows that the test cases fail. |
I have the issue with 6.4.3. Any news about? |
Easiest solution with preserving correct scrolling functionality is just:
Scroll-bar width is 17px, so just make sure that with opened reveal web page won't move. |
For which browser? Is that in the spec? Unfortunately I doubt it that all the browsers conform to the same width. |
@isapir You were right! Scrollbar for each browser is different. So I tried just window.innerWidth - $(window).width() but this is a bad solution because (probably) with overflow: hidden, these values will be the same. So I used scroll-bar width solution (https://github.com/olmokramer/scrollbar-width.js/) and there is a nice working solution with preserve of scrolling functionality when the modal window have bigger height than window height.
Thanks for reply and warning 👍 |
AFAIK this issue was fixed with the patch that I provided #10583 which has been pulled in and will be available in the next release. |
This issue should be reopened now due to regression from #11065 See also comment at #10791 (comment) |
@ncoden Do you want me to look into this issue or do you have someone working on it? |
@isapir I am working on this. I have a working solution. |
Excellent :)
…On Sun, Jun 17, 2018, 2:08 PM Nicolas Coden ***@***.***> wrote:
@isapir <https://github.com/isapir> I am working on this. I have a
working solution.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#7831 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AA2Ek89Zen1LSRhuEkp4PE-vJ-Kt5J3Lks5t9sVJgaJpZM4HB13o>
.
|
foundation#11065 was intented to avoid double scrollbars from a Reveal modal, but removing all scrollbars when the modal opens changes the page content width and the content shift. This is a regression of foundation#7831. The current solution is a mix between the two previous fixes: * Modal may have a scrollbar or not, following its content height * Body has no scrollbar and prevent any scroll * Document may have a scrollbar, following its content height (controlled in JS) Changes: * add the `zf-has-scroll` global html modifer and toggle it on Reveal opening/closing * always prevent scroll on body instead of html tag like in foundation#10583 See foundation#10791 (comment) Closes foundation#7831
fix: keep a scrollbar on document when Reveal opens #7831
…lbar-7831 for v6.5.0 96141b7 docs: add doc for Reveal methods _addGlobalClasses/_removeGlobalClasses deda9dc refactor: rename Reveal internal methods for a better clarity 82a0493 fix: show/hide Reveal scrollbar on window resizing e6eb9b0 fix: keep a scrollbar on document when Reveal opens foundation#7831 Signed-off-by: Nicolas Coden <nicolas@ncoden.fr>
How can we reproduce this bug?
On reveal modal docs page
What did you expect to happen?
To open modal and nothing more
What happened instead?
When I open modal the width of content is changing
Test case
Open any modal link
Give us a link to a CodePen or JSFiddle that recreates the issue.
http://foundation.zurb.com/sites/docs/reveal.html
The text was updated successfully, but these errors were encountered: