-
Notifications
You must be signed in to change notification settings - Fork 5.9k
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
Huge width and horizontal overflow when used in CSS Grid #3415
Comments
Try to add
|
I was having the same issue. @farissi's idea of adding It seems this is a CSS Grid issue, rather than a problem with Slick.js. When you use Slick gets the correct width for the track on the first pass and sets it on the element. This is when the problem arises - the newly set width increases the min-content size of the grid content, which in turn causes the width of the grid track to increase to match. You can prevent the grid track from stretching like this by setting it to See the updated JS Fiddle - http://jsfiddle.net/9jzh45sx/13/ This probably explains why the |
same issue here, but ONLY in Firefox (v65), but apparently the "overflow: hidden;" trick does the job… not a definitive solution though |
As @IAmAdamTaylor pointed out, the issue is related to the CSS Example : https://codepen.io/enguerranws/pen/rRgJYM Works well in Chrome (73), Firefox (66) and Safari (12.1). @IAmAdamTaylor 's one also working on this browsers. |
Nice! Changing grid-template-columns: repeat(3, 1fr); to grid-template-columns: repeat(3, minmax(0, 1fr)); on the containing element fixed this issue for me. |
====================================================================
JSFiddle Demo of the issue:
http://jsfiddle.net/9jzh45sx/7/
====================================================================
Steps to reproduce the problem
====================================================================
What is the expected behaviour?
Slick should take the width of the parent element
====================================================================
What is observed behaviour?
Slick sets a huge width (60,000 px) and overflows horizontally
====================================================================
More Details
Firefox 59, Chrome 65
jQuery 3+ / Slick version 1.9
The text was updated successfully, but these errors were encountered: