Skip to content

Fixes item width calculation when `box-sizing`='border-box'. Fixes Issue #633 #786

Closed
wants to merge 2 commits into from

4 participants

@raulferras

When items use box-sizing:border-box, a wrong slider.boxPadding is calculated, resulting in a smaller width per item.
This change checks if items has this border-box value and sets 0 to slider.boxPadding. Different css prefixes are taken into account.

@michaelfavia

Confirmed this fix works for border box items like zen grids based layouts, etc. Thank you.

@JohnAlbin

@clinisbut Line 700 needs to end in a comma, not a semi-colon. That way the new boxSizing variable will be included in the var list and, thus, will not be a global variable like it is in 9de3a01.

@raulferras
@raulferras

Please, don't merge this yet as I've found there's still issues when border-box is used.
I think calls to $.width() to set width to item elements should be replaced with $.css('width') as stated in jQuery docs:

Note that .width() will always return the content width, regardless of the value of the CSS box-sizing property.

As of jQuery 1.8, this may require retrieving the CSS width plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box. To avoid this penalty, use .css("width") rather than .width().

As I don't know what's the target of flexslider I don't know if it is safe to just replace width(x) with css('width',x).

@jeffikus jeffikus closed this Apr 1, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.