custom-cards / button-card

❇️ Lovelace button-card for home assistant
MIT License
1.83k stars 227 forks source link

blank-card broken in 2024.7.0b0-2 #855

Closed SmarterHomeLife closed 6 days ago

SmarterHomeLife commented 1 week ago

The blank-card option isn't working in 2024.7.0b0, it seems to be ignoring sizing and takes up much more space than it did previously so everything around it shrinks as per the screenshots below, dashboards that don't use the blank-card look to be OK.

2024.6.4 Screenshot_20240627-111427

2024.7.0b0-2 Screenshot_20240627-085340

scooper1 commented 1 week ago

I think it's all buttons ignoring sizing not just blank buttons.

SmarterHomeLife commented 1 week ago

It doesn't seem to affect views where I haven't used blank-cards for spacing of buttons.

Screenshot_20240627-125740

To test I've added the blank-card spaces to 1 row of the above view and this is the result, but interestingly there is an unsized blank-card next to the advanced button on the bottom row and it works perfectly.

Screenshot_20240627-130613

Mariusthvdb commented 1 week ago

not sure if its as simple as blaming button-card to ignore sizing.

as a matter of fact none of my many cards is affected, and all use sizing....

if you state it is the sizing, then please post the minimal of button-card config you have that is affected, so we can have a look

meanwhile, core dev are on this, because also the core cards need some more detailed inspection, and might well be a bug there. not saying that it is....

so please substantiate screenshots with actual yaml

SmarterHomeLife commented 1 week ago

Below is the yaml for the screenshots directly above to try to highlight why I think it's the sizing of the blank-card that is causing issues, please let me know if you need any other information to assist in resolving.

This is the yaml of the view where blank-card with specified sizes aren't used for spacing between buttons;

---
## settings.yaml | 2024.6.0
title: Settings
path: settings
icon: iq:gear
cards:
  - type: vertical-stack
    cards:
      - type: custom:decluttering-card
        template: header
      - type: custom:decluttering-card
        template: title
        variables:
          - title: Settings
      - type: horizontal-stack
        cards:
          - type: custom:decluttering-card
            template: navigation-button
            variables:
              - name: Display
              - icon: iq:palette
              - path: display
          - type: custom:decluttering-card
            template: navigation-button
            variables:
              - name: Automations
              - icon: iq:automation
              - path: automations
      - type: horizontal-stack
        cards:
          - type: custom:decluttering-card
            template: navigation-button
            variables:
              - name: Network Status
              - icon: iq:network
              - path: network
          - type: custom:decluttering-card
            template: navigation-button
            variables:
              - name: System Status
              - icon: iq:system
              - path: system
      - type: horizontal-stack
        cards:
          - type: custom:decluttering-card
            template: advanced-button
          - !include ../../includes/blank-card.yaml

Yaml for the blank-card include;

---
## blank-card.yaml
type: custom:button-card
style: |
  ha-card {
      border: var(--border);
  }
color_type: blank-card

Yaml for the affected row of the last screenshot above;

      - type: horizontal-stack
        cards:
          - !include ../../includes/l-space.yaml
          - type: custom:decluttering-card
            template: navigation-button
            variables:
              - name: Network Status
              - icon: iq:network
              - path: network
          - !include ../../includes/l-space.yaml
          - type: custom:decluttering-card
            template: navigation-button
            variables:
              - name: System Status
              - icon: iq:system
              - path: system
          - !include ../../includes/l-space.yaml

Yaml for the l-space include;

---
## l-space.yaml
type: custom:button-card
style: |
  ha-card {
      border: var(--border);
  }
color_type: blank-card
styles:
  card:
    - width: 4px
Mariusthvdb commented 1 week ago

could you please create a minimal config? posting these larger cards is not really helpful for others to help you.

If you have a minimal card with sized blank card that would give us something to work with. No includes, or decluttering, because everything can be a detail in not working... again, make it as direct and small as possible

besides that, consider why you are setting the size on the blank card in the first place, does it not work otherwise, do grids not click in place? (Ive never used a width/height on those and never met any trouble, but your mileage may vary ofc)

these are all options that still work for me:

vertical-filler:
  color_type: blank-card

empty:
  color_type: blank-card
#   styles:
#     card:
#       - border: none
#       - border-width: 0px
# this is in my themes, so need not set a border or border-width in any card

blank:
  aspect_ratio: 1
  tap_action: &none
    action: none
  hold_action: *none

though I no longer use them and replaced them with empty grids, (but that is not fixing the issue, just another way of making Dashboards more pure 'core')

scooper1 commented 6 days ago

my issues with the button card are now fixed it was a problem with the stack cards I was using this has now been fixed and all my sizes are back to pre-beta sizing I don't use a blank layout so I don't know if still an issue

Mariusthvdb commented 6 days ago

Yep all fixed.

This issue should be closed now.

SmarterHomeLife commented 6 days ago

Thanks @Mariusthvdb for the suggestions above, I'll look into them.

Confirming this is fixed in 2024.7.0b3 so will close.