thomasloven / lovelace-layout-card

🔹 Get more control over the placement of lovelace cards.
MIT License
1.08k stars 127 forks source link

masonry-view-card-margin question / possible issue #168

Closed robertalexa closed 2 years ago

robertalexa commented 2 years ago

Hi @thomasloven

First thanks a lot for your work with all of these mods your have put out there. I think i have only scrapped the surface of what is achievable :)

Just a question and I can't seem to find an answer for it, nor are my tests successful.

Here is code: https://github.com/thomasloven/lovelace-layout-card/blob/866284a902c7cb662bdf03e388ed2d686b83c879/src/layouts/grid.ts#L134-L136 there is a reference for masonry-view-card-margin variable, technically allowing a user to set their preferred margin rather than the 4px 4px 8px fallback.

Here is a screenshot of my view: image

You can see the gap at the bottom being bigger than at the sides. This is as a result (obviously) of this: image

In my use case, the whole view is a custom:grid-layout image

I have tried adding the variable to my theme, reloaded, no success. I have also tried adding it as a style to the view, no success either (or maybe i did it wrong).

If you have a minute, could you please assist? Thanks in advance

PS: i scavenged the HA forum for an answer and I have found some references, but they point at the card level rather than view level. https://community.home-assistant.io/t/layout-card-take-control-of-where-your-cards-end-up/147805/416?u=horussjr

robertalexa commented 2 years ago

Alternatively, is there any reason why the fallback is 4px 4px 8px? As in the 8px at the bottom? Only asking because if you look at the masonry of a default lovelace dashboard, all margins are equal.

image

thomasloven commented 2 years ago

masonry-view-card-margin is a theme variable used by the default masonry view. It's used in layout-card with the same fallback as in the default view layouts.

Check out the new layout options margin, padding and card_margin in the latest release 2.4.0-

robertalexa commented 2 years ago

Thank you @thomasloven for the solution. Had to rework my cards a bit to achieve the desired result but overall i ended up with less lines of code and sth that actually worked, vs only partially. Appreciate the new options :)