Add support for card_margin in grid layouts

[cdhgee]

Fixes #194

[Madelena]

Has this been merged yet? This fix is sorely needed.

[M4th1asK]

@thomasloven

[awgneo]

This code looks good :) Need this as well ;) *NVM noticed a bug

[awgneo]

I corrected and tested this change in this PR instead https://github.com/thomasloven/lovelace-layout-card/pull/210/files :)

[cdhgee]

Looks like you only changed line 152 in grid.ts, correct?

from

to

The fallback value of 4px 4px 8px was deliberate so that it retains the existing behavior if not explicitly defined. Your version of the PR would introduce a breaking change.

[awgneo]

When I tested this PR, my margins were not appropriately applied. So instead, I mirrored the existing column logic of

lovelace-layout-card/src/layouts/base-column-layout.ts

Line 256 in 466df9c

margin: var(--card-margin);

in my PR, which already has a fallback defined in its configuration

lovelace-layout-card/src/layouts/base-column-layout.ts

Line 95 in 466df9c

--card-margin: ${

I supported this strategy in the same way in my PR https://github.com/thomasloven/lovelace-layout-card/pull/210/files#diff-4f9f8ab90608430f9ad38a4a682f3e9f7cbd2aa69d11a636ec18b84ea33f5094R62, and it works as expected without breaking existing logic, with or without setting card_margin.

[pafnow]

Has this been merged yet? This fix is sorely needed.

Me too !

[snjoetw]

@thomasloven can we have this merged please?

[EmJay276]

Isn't this the same with additional overflow? #210

[sciurius]

@cdhgee With your version of card-layout.js I still get unwanted margins.

views:
      - type: custom:grid-layout
        layout:
          grid-template-columns: 50% 50%
          margin: 0
          padding: 0
          card_margin: 0 0 0 0
        cards:
              - type: markdown
                content: 'a'
              - type: markdown
                content: 'b'
              - type: markdown
                content: 'c'
              - type: markdown
                content: 'd'

Did I misunderstand this feature, or how to apply? I just copied card-layout.js to www/community/lovelace-layout-card/.

[cdhgee]

The intention was to fix the hardcoded card margins that are present in the grid layout. I'll have a play around using your layout config and see if I can figure out what's going on. I was using a custom:layout-card inside a panel layout instead of using the custom:grid-layout directly, maybe it behaves differently for some reason.

…

On Sun, Feb 26, 2023, 08:28 Johan Vromans ***@***.***> wrote: @cdhgee <https://github.com/cdhgee> With your version of card-layout.js I still get unwanted margins. views: - type: custom:grid-layout layout: grid-template-columns: 50% 50% margin: 0 padding: 0 card_margin: 0 0 0 0 cards: - type: markdown content: 'a' - type: markdown content: 'b' - type: markdown content: 'c' - type: markdown content: 'd' Did I misunderstand this feature? [image: scrot20230226152721] <https://user-images.githubusercontent.com/1118804/221416646-a3796889-246e-4341-ba0a-4982f3263bf0.png> — Reply to this email directly, view it on GitHub <#195 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAJSWKKYNNDNPDCQR4AL523WZNSCFANCNFSM5TBIZ6AA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[cdhgee]

@sciurius This is how it looks with your code on my system:

I've noticed that Lovelace generates/uses gzipped versions of JS files in some instances. I suspect that even though you copied over the card-layout.js file, Lovelace is using the card-layout.js.gz compressed version. Renaming or removing the compressed version and restarting HA should force it to start using the updated card-layout.js file.

[sciurius]

I did replace layout-card.js, layout-card.js.gz, rollup.config.js and rollup.config.js.gz and restarted HA (and the browser) several times... The size difference shown in your screenshot made me realize that I forgot to switch to the bugfix-grid-layout-margin branch first.
Now it is working as expected. Great job!

For the sake of completeness, layout-card.js in the bugfix-grid-layout-margin branch of the repo is 49409 bytes while the one shown is 49535 bytes.

[cdhgee]

@sciurius Glad you got it working. The difference in size in my local copy vs the PR copy of layout-card.js is because I tweaked the console output of my local copy so that I could be certain that my updated copy was being used.