fitRows Sometimes Not Working

[Pixelous]

Hi,

fitRows sometimes not working on 27 inch monitor, Windows 10, Chrome. full width layout with 50% column width. When playing with browser window width all the items go vertical sometimes. Masonry works fine for me. On 18 inch monitor, Windows 7, Chrome fitRows works fine for me but on larger screen the error occurs(

Can you please take a look?

Test case: https://codepen.io/pixelous/pen/JjXgbZN

[thesublimeobject]

@Pixelous i tried playing around with your pen and couldn't seem to replicate your issue on windows or mac (27" monitor + laptop screen). could you describe what you mean in a bit more detail? when you say that "all items go vertical sometimes", do you mean that they pop vertical for a split second while you're moving the browser width in and out, or do you mean at certain widths all of the rows pop to columns and stay that way even after you stop changing the browser width?

[marcigo36]

Hi,

I also encountered the same issue you have mentioned.

I found the easiest way to reproduce it is using the 'iPhone 6/7/8 Plus' screen size preset in Chrome(at least for the codepen linked by OP).

[ktallafus]

Hi, I have another test case: https://codepen.io/kainobi/pen/dyXdooX I can reproduce this bug on Firefox 82 (Win10 + Ubuntu) when resizing window from 1600px and up. In chrome it works fine.

During debugging I noticed some strange differences in item width calculation between FF and Chrome:

Firefox

Chrome

Notice the difference in itemWidth (this.x too)? Which is weird, because these values (at least the itemWidth) seem to come from window.getComputedStyle().

And in other cases there seem to be some issues with floating point accuracy too.

[thesublimeobject]

@ktallafus okay, so i'm not sure that the two issues are related, but i was able to make more sense out of your issue: your problem is essentially and entirely styling related.

unless something has changed, i don't think you're supposed to use flexbox on isotope containers/items; it messes with their calculations. for that reason, i typically default to using inline-block for items and block for containers.

after i deleted the -10px margins and changed the container/items styles to—

#iso-grid {
  display: block;
  
  .item {
    display: inline-block;
    width: calc(100% / 3);
    max-width: calc(100% / 3);
  }
}

the layout seemed to work fine at all widths. so, at least for your issue, i do not think it's isotope related.

[ktallafus]

@thesublimeobject thank you very much for your help. You´re right, it works this way. But as soon as i introduce the gutter setting (we need the gutter), it does not work. Not sure if this is some misunderstanding on my side. See my updated pen.

I tried different variants for the gutter and i can get it working with margins, but in all working cases i end up having the gutter after the last column too (which means the container is not filled up to the right boundary.

[thesublimeobject]

@ktallafus awesome, glad i've been able to help!

for margin, i believe you typically need to define the widths such that they exclude the margin values. for example, let's say we have four rows with margins of 1rem, i would do something like this (sass)—

$columns: 3;
$width: 100% / $rows;
$margin: 1rem;
$adjustedMargin: $margin * (($columns - 1) / $columns);

#iso-grid {
    display: block;
  
    .item {
        display: inline-block;
        width: calc($width - $adjustedMargin);
        max-width: calc($width - $adjustedMargin);
    }
}

the reason for this is that, in this example, we have 4 columns, but that means we really only want to have margin set for 3 of the columns, since we don't want it on the last row. so, in order to get the "adjusted" width of each column, we take the total margin (3 margin "columns" multiplied by the margin size, 1 rem), divide it by the total number of columns (4), and then subtract that value from the width for each column. this, in a sense, "spreads" the margin equally between all four of the columns. so if there is a total of 3rem of margin, it gets equally distributed among the column widths by subtracting 0.75rem from each column (3rem / 4). and then i'll set the margin value as the gutter in my isotope config.

there actually may be a better way to do this—i'm not 100% sure. i've been using isotope for so long now that there are some conventions that i know just work, so i built functions for them years ago and i've just continued to use them.

so for your example, first, you don't need floats or clearfixes for isotope since all of the items are arranged absolutely anyway. second, the following worked for me—

.grid-item {
    // this reduces to calc(50% - 0.5rem), but i wanted to show the formula so that it made sense in context 
    width: calc((100% / 2) - (1rem / 2)); 
    height: 100px;
    background: #0D8;
    border: 2px solid #333;
    border-color: hsla(0, 0%, 0%, 0.7);
}

$('.grid').isotope({
    itemSelector: '.grid-item',
    layoutMode: 'fitRows',
    fitRows: {
      gutter: 16,
    },
    percentPosition: true,
});

i hope this explanation makes sense. you're welcome to ping me again if you do have any questions!

[Pixelous]

Hi, sorry for the delay.

@thesublimeobject I mean the second you have described: at certain widths all of the rows pop to columns and stay that way even after you stop changing the browser width.

Please take a look at the video https://streamable.com/tjcxlz

Any thoughts?

Kind regards