Dynamic grid, equal height


Hi,

I am using the dynamic grid because i need the filters features, but i don't want masonry, so i tried to add

data-uk-grid-match="{target:'.uk-panel'}"

But it doesn't work....how can i do that ?

This is the project : http://pkf.webstantly.com/grantees/ (not styled).


Hey Alex,

I took a look at the page and all panels height are set to 48px dynamically which seems like the expected behaviour. Did you perhaps manage to sort out this issue?

Thanks,


No , it is not fixed, look at the second lists set (on pink bg).

when there is a longer title which takes more lines, then the lines are not aligned anymore, which is a problem to create the cache panel to make the more thing at the bottom, as i always have some letters cut...


The thing is the filters features is linked with the dynamic grid, and i need the normal grid with the filters 🙁

I even try to add a manually a height to the panels, but nothing happens....

I think it's because of the masonry behaviour...

Is there a way to remove the masonry, but to keep the filters, that's the thing...

I think you saw the firsts list ok, because they have only one line on the names, the problem is on the second set of lists


Hello Alexandra, you would like to have it align like you did here: http://cozy.webstantly.com/recipes/ differents height, same space between every items? When I loaded you page everything is well align, but after around a second it jumps to align like on the right paragraph, you may have to build it again from ground, here you can have the ground https://getuikit.com/docs/grid-js.html you can also see there that different height doesn't matter they all have same space. Can't you take what you did on cozy?

Here you items are align on top with the colomn who face them. Guild Hall of East Hampton is align with Vermont Studio Center as it should be align with Fine Arts Work Center
in Provincetown inside the same column.

What is:data-grid-prepared, is it a widgetkit construct? if then, here is the mess

Wish you fix it


Hi Olivier,

no i don't want it like cozy, and that's the problem, cozy is masonry layout, which is the layout that the dymanic applied.

From the dynamic grid i want only the filters, not the masonry behaviour, and that's the problem


Ain't you want the same vertical space between each elem no matter how they're height? By the way what is "masonry" to google traduction I get: "maçonnerie"?



Masonry is the type of layout i have on cozy, i don't try to translate dev terms in french.

When i read things in french and see : 'Banniere animee" for slider, or "type de contenus" for custom post type, i'm lost.

So i stay in english for that 😉

Where are you from Olivier, i mean which city ?



You can add me on skype : crea-webdesign , so we can exchange in french 😉

Not this days, as i am super busy with this project


How can the panels to have the same height, if some have title on 2 lines, you would like to distorse it as they feet each other? With typography only I'm not sure that it 'll nice cause you'll have to mess with interlignage



Hi Alex,

I have done more testing on that and you can add class="uk-grid-match" data-uk-grid-match="{row: false}" to your data-uk-grid div which will automatically apply equal heights to the children 🙂

Let me know if that doesn't work for you!

Happy coding,


Hi,

i have not tried that, for the moment i have solved the problem, by js and adding the height of the heighest panel

Will try! Thanks !

Now i have a new thing, applying a filter to an accordion, but there the filter doesn't work, so i will have to create the filter in another way i think




Please share the final code result for all of us to learn from. Thank you.

Paal Joachim

Write a reply

Login or register to write a reply, it's free!