Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Parameter "card_margin" ignored when using grid layout #194

Open
4 tasks done
cdhgee opened this issue Apr 10, 2022 · 10 comments · May be fixed by #195
Open
4 tasks done

Parameter "card_margin" ignored when using grid layout #194

cdhgee opened this issue Apr 10, 2022 · 10 comments · May be fixed by #195

Comments

@cdhgee
Copy link

cdhgee commented Apr 10, 2022

My Home Assistant version: 2022..4.1

Layout-card version (FROM BROWSER CONSOLE): LAYOUT-CARD 2.4.2 IS INSTALLED

What I am doing: Trying to set card margins on nested grid-layouts

What I expected to happen: Margin on cards within the grid is controlled by the card_margin parameter

What happened instead: card_margin parameter is being ignored and all cards have a margin

Minimal steps to reproduce:

  1. Add a card with the following YAML:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: 1fr
  margin: 0
  padding: 0
  card_margin: 0px
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
      margin: 0
      padding: 0
      card_margin: 0px
    cards:
      - type: button
        tap_action:
          action: toggle
        entity: light.garage_work_light
      - type: button
        tap_action:
          action: toggle
        entity: light.garage_work_light
  1. Observe that there is a gap between the cards. Per the code above the margin should be set to 0 on all sides.

image

This appears to be caused by the #root > * CSS which is getting injected

image

In other layouts which inherit from BaseColumnsLayout, the --card-margin CSS variable is set which defaults to the margin shown above, but can be overriden with the card_margin parameter. In the grid layout, this is statically set and cannot be overridden with card_margin.

        #root > * {
          margin: var(--masonry-view-card-margin, 4px 4px 8px);
        }

(grid.ts, lines 147-149)

Would it be possible to update the grid layout so that it uses the card_margin parameter if it is defined to correct this behavior?

In some instances it is possible to wrap the grid card in a card-mod card and set the margins that way, but this is not always possible - e.g., when using auto-entities.


By putting an X in the boxes ([X]) below, I indicate that I:

@cdhgee cdhgee linked a pull request Apr 10, 2022 that will close this issue
@rgogada
Copy link

rgogada commented Apr 11, 2022

having the same issue. looking forward to the merged version.

@aaamoeder
Copy link

still seeing this behavior ??? has a fix been merged ?

@EmJay276
Copy link

EmJay276 commented Jan 1, 2023

There is already a PR (#210) to fix this issue

@Sanch0ous
Copy link

Hi, PR still not reviewed ?

@Tahuwa
Copy link

Tahuwa commented Jul 21, 2023

Hi, any update regarding this PR?

@DanielSCBO
Copy link

Any news with this merge, or any workaround?

@Nerih
Copy link

Nerih commented Sep 6, 2023

just wanted to say that this issue still exists. Is it possible to review the PR/Merge?

for now, as a workaround, i have added masonry-view-card-margin:2px to my theme.yaml

i suspect you can change the 2px to what ever you like.

@luismalves
Copy link

Also still have the same bug @thomasloven. Could you please accept the PR request? Thanks!

@Nerih
Copy link

Nerih commented Sep 8, 2023

Also still have the same bug @thomasloven. Could you please accept the PR request? Thanks!
Amazing, also -
Did u try the work around? U can add masonary-view-card to your theme.yaml

@luismalves
Copy link

Yes but it will impact everywhere, some places it's needed the manual set of marging.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

9 participants