Skip to content
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

Inconsistency with CSS media queries width #6

Open
rap1ds opened this issue Apr 14, 2014 · 1 comment
Open

Inconsistency with CSS media queries width #6

rap1ds opened this issue Apr 14, 2014 · 1 comment

Comments

@rap1ds
Copy link

rap1ds commented Apr 14, 2014

Hi!

I noticed that minwidth does not include scrollbar width if scrollbar is visible. However, CSS media queries do take scrollbar size into account.

Given there's a media query min-width: 768 that changes the layout to tablet mode and there's a relocate call relocate(768, $("#filters"), $("#desktop-filters").get(0));, this is what happens when scrollbar is visible and I resize the window:

  1. When window size is 1000px, layout is desktop layout, everything ok
  2. When I resize the window to 782px then relocate is triggered, however, the layout is still in desktop mode. Not ok.
  3. When I resize the window to 768px then the layout is changed to tablet mode. Everything ok.

My solution was to use window.innerWidth:

var getWindowWidth = function() {
  // Get window width, code adapted from jQuery
  if ('innerWidth' in win) {
    return win.innerWidth;
  } else {
    var docwindowProp = doc.documentElement["clientWidth"];
    return doc.compatMode === "CSS1Compat" && docwindowProp
           || doc.body && doc.body["clientWidth"]
           || docwindowProp;
  }
}

It works as it should, but the browser support is >= IE9.

What do you think, could you use the innerWidth in minwidth?

@Sam152
Copy link

Sam152 commented Apr 27, 2014

Can we get this into a pull request? I had a similar problem where the relocate was sporadically moving elements around at widths anywhere within 10px of where I'd asked. This fixed it for me.

I'm not sure why anything more complicated than innerWidth needs to be used?

Other than that, love the library. Working really well for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants