[Bug]: when used on through a decluttering card in a grid, size is not 100/100

[Mariusthvdb]

What happened?

please see:

left is a minimalistic-area card configured via a decluttering card, right is the same card, but verbosely, both inside a grid

decluttering template:

card:
  type: custom:minimalistic-area-card
  card_mod:
    style: |
      ha-card {
        background-size: 100%;
        filter: {{'grayscale(0%)' if
                  (is_state('[[main_id]]','on') or
                   is_state('[[motion_id]]','on'))
                  else 'grayscale(100%)'}};
        border-top: {{'1rem solid red' if is_state('[[motion_id]]','on')
              else 'none'}};
      }
  title: '[[title]]'
  hide_unavailable: true
  area: '[[area]]'
  image: /local/images/areas/[[image]]
  shadow: false
  tap_action:
    action: navigate
    navigation_path: /ui-sub-views/[[path]]
  hold_action:
    action: call-service
    service: light.toggle
    service_data:
      entity_id: '[[main_id]]'
  entities:
    - '[[temp_id]]'
    - '[[humid_id]]'
    - '[[motion_id]]'
    - '[[switch_id1]]'
    - '[[switch_id2]]'

and grid:

  - type: grid
    columns: 4
    cards:

      - type: custom:decluttering-card
        template: minimalistic_area
        variables:
          - title: ' '
          - main_id: light.laundry_ceiling
          - temp_id: sensor.laundry_sensor_temperature
          - humid_id: sensor.laundry_sensor_illuminance
          - motion_id: binary_sensor.laundry_sensor_motion
          - image: bijkeuken_klein.jpg
          - path: bijkeuken

      - type: custom:minimalistic-area-card
        card_mod:
          style: |
            ha-card {
              filter: {{'grayscale(0%)' if
                        (is_state('light.laundry_ceiling','on') or
                         is_state('binary_sensor.laundry_sensor_motion','on'))
                        else 'grayscale(100%)'}};
              border-top: {{'1rem solid red' if is_state('binary_sensor.laundry_sensor_motion','on')
                    else 'none'}};
            }
#           title: Laundry
        image: /local/images/areas/bijkeuken_klein.jpg
        shadow: false
        tap_action:
          action: navigate
          navigation_path: /ui-sub-views/bijkeuken
        hold_action:
          action: call-service
          service: light.toggle
          service_data:
            entity_id: light.laundry_ceiling
        entities:
          - sensor.laundry_sensor_temperature
          - sensor.laundry_sensor_illuminance

I also filed this issue on decluttering card, because at first I figured the decluttering might interfere with the grid card. But, then I realized I have many dashboard config using decluttering inside a grid, and they all, behave perfectly.

My hope is you would be able to analyze where this is going astray.

All else is working perfectly, all variable entities are seen correctly, and (tap-hold)actions are executed as well.

Card Version

1.1.8

Home Assistant Version

2023.2b

Browser Version

Any browser I tested MAc Safari, Chrome, Firefox

Relevant javascript log output

nothing special on this config

[junalmeida]

Sorry I have no idea how the Decluttering Card interferes with other cards. But I noticed that you don't have the square option of the grid turned on, which might create different heights.
I also noticed the screenshot does not quite reflect all entities listed, maybe because they are unavailable at the moment. I'm also wondering if the following:

• '[[switch_id1]]'
• '[[switch_id2]]'
  would result on an empty item passed down to the card (because those variables are missing?), and if that is happening this is an untested scenario.

[Mariusthvdb]

thanks for getting back to me here, appreciated.

I did indeed check and test the square option for the grid. It doesn't change. It would be odd if it did though, since the verbose card is shown full square. also, as is documented, it defaults to true, so should only needed to be set for false.

about the hide_unavailable: true: it does in fact prevent empty fields in the decluttering card. So well, I can leave out setting defaults in the decluttering template.

But, even without those, there is no change.

only way I can get the decluttered card to show bigger, is by adding text to it, eg like giving at a long title:

      - type: custom:decluttering-card
        template: minimalistic_area
        variables:
          - title: "filter: {{'grayscale(0%)' if
                        (is_state('light.laundry_ceiling','on') or
                         is_state('binary_sensor.laundry_sensor_motion','on'))
                        else 'grayscale(100%)'}};
              border-top: {{'1rem solid red' if is_state('binary_sensor.laundry_sensor_motion','on')
                    else 'none'}};(is_state('light.laundry_ceiling','on') or
                         is_state('binary_sensor.laundry_sensor_motion','on'))
                        else 'grayscale(100%)'}};
              ;"
          - main_id: light.laundry_ceiling
          - temp_id: sensor.laundry_sensor_temperature
          - humid_id: sensor.laundry_sensor_illuminance
          - motion_id: binary_sensor.laundry_sensor_motion
          - image: bijkeuken_klein.jpg
          - path: bijkeuken

ofc this is a silly example, so nevermind the actual text please....

lastly, I tried what would happen using a core horizontal-stack, and it is the exact same outcome

[junalmeida]

This is what I have when square is false:

And this is when square is true:

Neither is creating different heights, so this should be something related to the other card messing with this one. Have you checked if there is any JavaScript error on console?

[Mariusthvdb]

thanks for testing!

I can confirm, even stated that in my opening post, that a straight minimalistic-area-card in a core grid shows full grid tile size. I even see that without square: true in the yaml..

so it must be something in the combination with this card and decluttering that causes trouble. And also, this explicit combination, because the many other grid configs I use with eg button card and decluttering, dont suffer this.

I did try to edit several of the styling options the resource directly ( so not with card-mod, but editing the .js file), and could see rendering change, but have not found the absolute solution so it shows both setup (grid/minimalistic And grid/decluttering/minimalistic) correctly..

hope you don't mind to keep this open for a bit, and let me experiment further?
If you have a suggestion as to which styling I should try to set differently in the resource, Id appreciate that.

this is inspector on both cards:

full size square card:

lower decluttered card combination:

all in the same main grid card.

editing the img property to

          object-fit: contain;

shows what happening probably: the available canvas simply isnt the full grid tile size. making the other options using contain or what ever futile:

and, taking out position: absolute renders the image correctly sized, but then ofc, other styling issues arise...

both on a decluttered combo card:

and on the straight minimalistic-area-card in the same grid. Note: square: true Is set on both of these now non shared cards.

[Mariusthvdb]

really sorry, I did try all that I can think of, and unfortunately had to decide to use core picture-glance card. This does not seem to cause the deviating card size when used, either as verbose card, or using a decluttering card like below.

default:
  - trigger_state: 'on'
card:
  type: picture-glance
  card_mod:
    style: |
      ha-card {
        border: {{'1em solid red' if is_state('[[trigger_id]]','[[trigger_state]]')
                else 'none'}};
      }
  entity: '[[main_id]]'
#   title: '[[title]]'
  show_state: true
#   state_color: true
  state_filter:
    'off': grayscale(80%)
#   area: '[[area]]'
  image: /local/images/areas/[[image]]
  aspect_ratio: 100%. # <---- this is required for the card to show as squared in the grid, might be a lead for minimalistic-area-card?
  tap_action: none
  hold_action:
    action: navigate
    navigation_path: /ui-sub-views/[[path]]
  double_tap_action:
    action: toggle
  entities:
    '[[entities]]'

I did find an old post, with a related anomaly on another card using decluttering, so please dont take it personally ;-)
Ill close here.
thanks for your efforts!

[junalmeida]

I'm glad you could find a way to achieve what you need, either using this card or not.

[Mariusthvdb]

well, tbh, your card would have been nicer, because it allows to show the entities on it with their colors, where picture-glance is all white, no matter their state....

maybe, 1 day .... ;-)