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

[BUG] Width calculation for percentage widths incorrect #148

Open
jonasva opened this issue Sep 12, 2020 · 3 comments
Open

[BUG] Width calculation for percentage widths incorrect #148

jonasva opened this issue Sep 12, 2020 · 3 comments
Labels

Comments

@jonasva
Copy link

jonasva commented Sep 12, 2020

Describe the bug
When using a responsive grid with grid items that have their widths defined in percentage, filterizr does not correctly calculate the width in pixels of each grid item.

Filterizr version
2.2.4 - Vanilla JS version

To Reproduce
I've created a codepen that illustrates the issue.

  • I've setup a basic grid with 25% width items
  • Then added a wrapper on the whole grid with a width (622px) that is not divisible by 4 without having decimals.
  • Normally the calculated width of each grid item in pixels should be 155.5px, but filterizr makes it 156px. I'm guessing it might be a rounding issue?
  • Result is that instead of displaying 4 items on one row, there are only 3.

Desktop (please complete the following information):

  • OS: OSX 10.14
  • Browser: Chrome
  • Version: 85

Additional context
I think it might be related to #33, although the issue is marked as fixed already in 2.2.0

@jonasva jonasva added the bug label Sep 12, 2020
@FrogMustang
Copy link

I have this issue too and it's affecting my design a lot. Has anyone found a fix for it?

@flortsch
Copy link

flortsch commented Mar 26, 2021

I have the same issue with Bootstrap columns. Initializing filterizr with a small negative value for gutterPixels (e.g. -1) seems to work around the bad calculation.

@FrogMustang
Copy link

I have the same issue with Bootstrap columns. Initializing filterizr with a small negative value for gutterPixels (e.g. -1) seems to work around the bad calculation.

This fixed the problem. Thank you so much for the fix. 😍

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

No branches or pull requests

3 participants