You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
When window size is 1000px, layout is desktop layout, everything ok
When I resize the window to 782px then relocate is triggered, however, the layout is still in desktop mode. Not ok.
When I resize the window to 768px then the layout is changed to tablet mode. Everything ok.
My solution was to use window.innerWidth:
vargetWindowWidth=function(){// Get window width, code adapted from jQueryif('innerWidth'inwin){returnwin.innerWidth;}else{vardocwindowProp=doc.documentElement["clientWidth"];returndoc.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?
The text was updated successfully, but these errors were encountered:
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.
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 callrelocate(768, $("#filters"), $("#desktop-filters").get(0));
, this is what happens when scrollbar is visible and I resize the window:relocate
is triggered, however, the layout is still in desktop mode. Not ok.My solution was to use
window.innerWidth
:It works as it should, but the browser support is >= IE9.
What do you think, could you use the
innerWidth
in minwidth?The text was updated successfully, but these errors were encountered: