search

thomasloven / lovelace-layout-card

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

Additional margins when nesting Grid Layout-Cards within Grid View Layouts #137

Open Jpsy opened 3 years ago

Jpsy commented 3 years ago

My Home Assistant version: 2021.3.4

Layout-card version (FROM BROWSER CONSOLE):
2.2.3

What I am doing: Nesting Layout-Cards of type grid within View Layouts of type grid.

What I expected to happen: Nested layout-cards should align with normal cards in the grid layout.

What happened instead:

  1. All nested layout-cards have a left and right margin of 4px: image <div id="root"...>: image

  2. If the nested layout-card is the very first card in a View Layout Grid, it additionally gets an unwanted top margin of 4px: image First <layout-card>: image All other <layout-card>s: image

  3. (Looking at the CSS in 2. there should also be an additional bottom margin for the last nested card, but I did not witness this problem yet.)

Minimal steps to reproduce: This is a YAML block for a complete Lovelace view as shown in the screenshots above. It can be pasted into Lovelace in raw edit mode.

  - title: Grid Test
    path: grid-test
    type: 'custom:grid-layout'
    layout:
      grid-template-columns: 1fr 1fr
    badges: []
    cards:
      - &ref_1
        type: 'custom:layout-card'
        layout_type: grid
        cards:
          - &ref_0
            type: button
            tap_action:
              action: toggle
            entity: light.couch
          - *ref_0
        layout_options:
          grid-template-columns: 1fr 1fr
      - *ref_0
      - *ref_0
      - *ref_1

Error messages from the browser console:

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

mtandrup commented 3 years ago

I can confim this issue as I am experiencing the exact same behaviour.

AdrinkBeer commented 3 years ago

Hey!

Did you find a workaround for this ?

Jpsy commented 3 years ago

Nope. Unfortunately not.

jelgblad commented 3 years ago

An option to disable the margins on layout_type: grid completely would be wonderful.

Something like this:

type: custom:layout-card
layout_type: grid
container_margins: false
cards: []

In addition to solve this particular issue, it would also help with aligning this custom grid with the default grid-card which doesn't add any margins.

Here's the code where the margins gets added to #root: https://github.com/thomasloven/lovelace-layout-card/blob/b146132f829cb616d9228958098e4b2f3d7f7ecb/src/layouts/grid.ts#L130-L131

elahd commented 3 years ago

161 should help here -- can anyone test to confirm? To test:

  1. Replace your own layout-card.js with this version (Edit: See comment below). On my system, this file is in /config/www/community/lovelace-layout-card. Yours should be in a similar location.
  2. Modify your grid layout's config using yaml in the below format: 
    style:
margin: 0

    margin accept values in the standard CSS margin shorthand, e.g.: margin: 0px 10px 2px 5px.

In context, it'll look something like this:

title: Grid layout
type: custom:grid-layout
style:
  margin: 0
layout:
  grid-template-columns: auto 30px 25%
  grid-template-rows: auto
cards:
  - type: entities
    entities:
      - entity: light.bed_light
    view_layout:
      grid-area: header
  1. In Home Assistant, go to Developer Tools → Services and call the "Home Assistant Frontend: Reload themes" service.
  2. Clear your browser's cache.
  3. Refresh page & check margins.
davidmerrique commented 3 years ago

@elahd Should this be padding instead?

Typically with CSS grid, you would use padding to add space around the grid container. (Or at least that's what I do) If 2 margins come into contact, the margins would overlap.

Either way 👍🏽

elahd commented 3 years ago

@davidmerrique I was working off of the existing styles, but more options can't hurt! I added support for configurable padding to the same PR. Use the updated layout-card.js here.

You can now do:

style:
  margin: 0
  padding: 4px
oramirite commented 2 years ago

This is an awesome change, thank you. But it doesn't seem to be working. I replaced /config/www/community/lovelace-layout-card/layout-card.js with your new one but the settings don't seem to take effect.

thomasloven commented 2 years ago

I think this can be solved with the new layout options margin, padding and card_margin.

Jpsy commented 2 years ago

Great news, thanks! I will check and report back here as soon as HA 2022.3 is released. (Sorry, can't run betas. Have to keep things stable or family will kill HA admin == me.)

thomasloven commented 2 years ago

If you don't rely on the GUI editors the latest version will work with 22.2 too, but you'll have to install it manually.

u8915055 commented 2 years ago

I am having a similar problem here i believe. I have a grid layout and then a grid layout card within that layout. I am finding the margin, padding, and card_margin configuration options not having any effect. Here is my config.

This my view configuration. i have a left hand side dashboard and the rest of the viewport for the second column.

  - type: custom:grid-layout
    path: '2'
    title: '2'
    layout:
      grid-template-columns: 384px 1fr
      grid-template-rows: auto
      grid-template-areas: |
        "footer   rooms"
        "sidebar  rooms"
        ".        rooms"
      mediaquery:
         #phone
        "(max-width: 915px)":
          grid-template-columns: 384px
          grid-template-areas: |
            "footer"
            "sidebar"
            "rooms"
    cards:

Then this is my layout card to put another grid in that right hand 1fr column.

      - type: custom:layout-card
        view_layout:
          grid-area: rooms
        layout_type: grid
        layout:
          grid-template-columns: 475px 475px 475px
          grid-template-rows: auto
          margin: 0
          padding: 0
          card_margin: 0
          mediaquery:
            "(max-width: 915px)":
              grid-template-columns: 384px
            "(max-width: 1385px)":
              grid-template-columns: 475px
            "(max-width: 1860px)":
              grid-template-columns: 475px 475px
        cards: 

        - type: custom:decluttering-card
          template: sonos_declutter
          variables:
            - entity: media_player.denise_office

There are a bunch of other cards there in that grid layout. But for some reason i cannot get rid of margins for example.

Jpsy commented 2 years ago

@u8915055: Multiple problems with your config:

  1. To get rid of all margins/paddings you must set margin/padding/card_margin not only in the grid card configs, but also in the view config.
  2. The layout_type for the grid cards has changed from grid to layout_type: custom:grid-layout.

Here is a working view config for a 2 column view layout without margins:

  - title: Grid Test NEW
    path: grid-test-new
    type: custom:grid-layout
    layout:
      grid-template-columns: 1fr 1fr
      margin: 0
      padding: 0
      card_margin: 0

This is taken from the raw editor. You get this through these settings in the view's UI editor:

image

And here is a working card config for a 2 column card without margins:

type: custom:layout-card
layout_type: custom:grid-layout
cards:
  - type: button
    tap_action:
      action: toggle
    entity: light.couch
  - type: button
    tap_action:
      action: toggle
    entity: light.couch
layout:
  grid-template-columns: 1fr 1fr
  margin: 0
  padding: 0
  card_margin: 0

UI-Editor: image

All this being said, some margins can be eliminated with the new properties, but not all of them. I will come to this in my next posting.

thomasloven commented 2 years ago

Remember that css margin can be a negative number too.

Jpsy commented 2 years ago

Hi @thomasloven, you are right, negative margins can resolve nearly all issues.

But there is one problem left. I already mentionen that in my original issue report. But let me isolate it again:

If you use grid layout cards nested within a grid layout, the very first card has a top-margin that differs from all other cards.

The following example is a grid view. Each row has a grid layout card with 2 inner button cards (the small buttons), followed by a stand-alone normal button card (the big button).

image

As you can see, the small buttons in the first row do not top-align with the big button (4px difference), while in the second row they align perfectly. The reason for that is the following constructed stylesheet that is attached to all <layout-card>s:

image

It zeroes out the top-margins of all cards in the view but the very first card. The very first card keeps it standard top-margin: 4px.

Sure, I could compensate this by giving that first card other margins than all following cards. But if I use grid-areas in my view (which I do often because it is a major advantage of grids) these areas can change their position and their order with different screen resolutions. The card which is the very first now may not be the first on a mobile.

Is it possible to remove this different handling? I don't care if all cards have 0 top-margin or 4px top-margin, as long as they are all the same. I guess this different handling is actually a remnant of non-grid views. But it does not really make sense in grid views.

Here is a YAML block for a complete Lovelace view to reproduce the above screen shot. It can be pasted into Lovelace in raw edit mode.

  - title: Grid Test NEW
    path: grid-test-new
    type: custom:grid-layout
    layout:
      grid-template-columns: 1fr 1fr
      margin: 0
      padding: 0
      card_margin: 0
    badges: []
    cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        cards:
          - type: button
            tap_action:
              action: toggle
            entity: light.couch
          - type: button
            tap_action:
              action: toggle
            entity: light.couch
        layout:
          grid-template-columns: 1fr 1fr
          margin: 0 -4px 0 -4px
          padding: 0
          card_margin: 0
      - type: button
        tap_action:
          action: toggle
        entity: light.couch
      - type: custom:layout-card
        layout_type: custom:grid-layout
        cards:
          - type: button
            tap_action:
              action: toggle
            entity: light.couch
          - type: button
            tap_action:
              action: toggle
            entity: light.couch
        layout:
          grid-template-columns: 1fr 1fr
          margin: 0 -4px 0 -4px
          padding: 0
          card_margin: 0
      - type: button
        tap_action:
          action: toggle
        entity: light.couch

Oh. And one more time: Many thanks for all your awesome Lovelace cards. My HA dashboards would not be possible without them!

andrewjswan commented 2 years ago

Same problem, could not override the margin values in #root > * can there be any solution? image

emufan commented 2 years ago

Same here. I played around a lot for having card_margin set in grid layout. But nothing is working. Would appreciate any help.

snairolf commented 2 years ago

Same here. card_mod seems to be a no-op.

prs-wjy commented 1 year ago

same problem, is there any solution for it yet? i can't find any solution :(

m-klecka commented 1 year ago

Also have this problem, margins at sides and bottom when using custom-grid card. Can be solved by setting negative margins, but thats stupid when you have lot of cards.

aaamoeder commented 1 year ago

having the same issue .. driving my odd self nuts...

EmJay276 commented 1 year ago

I have the same issue 😢

matteobrusa commented 1 year ago

same here, card_margin seems to have no effect. Edit: solved by creating a theme with masonry-view-card-margin: 0

mrestorff commented 1 year ago

For anyone wondering what exact negative margins have to be used: I solved this by using margin: "-4px -4px 0px -4px" in the layout_options, which is applied to the grid-layout element. This negates the 4px applied by the layout-card element.

While this is a good workaround, having layout-card detect when it's nested inside another one and apply the fix itself would be even better. Is there any way of implementing that level of self-awareness without too much effort?

zholdak commented 1 year ago

Nothing works anyway. Unwanted margins remains. No any hope to be fixed since Apr 6, 2021...

hmax-72 commented 1 year ago

Remember that css margin can be a negative number too.

you're right: Setting margin to -4px did it.

- type: custom:layout-card
            layout_type: custom:grid-layout
            layout:
              grid-template-columns: 50% auto 25%
              grid-template-rows: auto
              grid-template-areas: |
                "left middle right"
              place-items: stretch stretch
              margin: -4px
            cards:
              - type: custom:mushroom-vacuum-card
tbarbette commented 1 year ago

Any solution by now? :) Negative margin does not work :(

Lx commented 1 year ago

From the README as currently published:

All column based layouts accept the following layout options: ... card_margin

I think all we need is for card_margin to be honoured by custom:grid-layout too. Currently it's defined in the BaseColumnLayout class:

https://github.com/thomasloven/lovelace-layout-card/blob/b63bf93daf166609ededbafc7b31a6e5d88037c3/src/layouts/base-column-layout.ts#L96

...but not the GridLayout class:

https://github.com/thomasloven/lovelace-layout-card/blob/b63bf93daf166609ededbafc7b31a6e5d88037c3/src/layouts/grid.ts#L54-L62

@thomasloven, can you foresee a problem with card_margin processing logic being either:

Phobos-7 commented 1 year ago

This is what worked for me (example):


grid-template-columns: 35% 45% 20%
grid-template-rows: auto
width: 160
max_cols: 3
margin: -4px
daha76 commented 1 year ago

I am fighting the same issue, for now, I fixed it like many others with a negative margin of -4px.

Montreal666 commented 11 months ago

Fixed it by embedding everything in mod-card:

type: custom:mod-card
card_mod:
  style:
    layout-card$:
      grid-layout$: |
        :host {
          padding: 0rem !important;
        }
        #root {
          margin: 0rem !important;
        }
        #root > * {
          margin: 0.1rem !important;
        }
card:
  type: custom:layout-card
  layout_type: grid
  layout:
    grid-template-columns: 30% 30% 1fr
    grid-template-rows: auto
    grid-template-areas: |
      "A A1 A2"
      "A A1 B2"
  cards:

but having a working option directly under layout-card would be much simpler as this doesn't work here:

        layout:
          margin: 0
          padding: 0
          card_margin: 0
TarcisioMenezes commented 9 months ago

card_margin doesn't seem to be working for me either...

- type: custom:layout-card
  layout_type: custom:grid-layout
  layout:
    card_margin: '100px 100px 100px'
    padding: 0px
    grid-template-columns: 25% 25% 25% 25%
    grid-template-rows: auto
    grid-template-areas: |
      "1 1 1 2"

tested with 100px just to have a visual reference of the card moving if it was working. Nothing happens though ... margin and padding work.

efaden commented 9 months ago

Struggling with this also. I'm using the bubble card popups and between using the grid-layout view and the bubble card popups I have a bunch of blank space at the bottom.