search

bigbite / macy.js

http://macyjs.com/
MIT License
1.28k stars 156 forks source link

If parent container is display: flex macy doesn't calculate top position on page load #56

Closed Flowgram closed 5 years ago

Flowgram commented 5 years ago

Hi,

I've been using macy.js quite a bit recently and I'm very happy with it.

As the title says, sometimes I'd like to set the parent container to display: flex to avoid a massive layout switch once the JS and Macy kick in (or JS fails to load). In some scenarios, this stops Macy from calculating the correct positions for the child elements. If you resize the browser, it recalculates and everything is fine.

You can see an example here: https://jsfiddle.net/8vrq2zjf/1/

jrmd commented 5 years ago

Hi @Flowgram

I found a css solution to help with this; To start add align-items: flex-start to .container.

Now on the .card you need to make sure your flex values are equal to to the column widths that macy would choose. For example, when macy uses 5 columns, set the flex basis to calc(20% - 19.2px) you will need to do this for all sizes using media queries.

To work out what the value would be, the percentage is 100 / $columns and the pixel value is ($columns - 1) * $margin / $columns so if the margin was 24 and it was columns it would be 4 * 24 / 5.

Let me know if that works.

Thanks, Jerome

Flowgram commented 5 years ago

@jrmd That's perfect! flex-start did the trick, thank you so much.

In terms of the column width, thanks for your pointers, I'll have a look into this.