fill_container property not working when used in a template

[TimGeerts]

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
v1.0.0

Last working release (if known):

Browser and Operating System:
View dashboard: Windows 11 / Chrome
HA Server: Home Asisstant Yellow

Description of problem:
Using the property "fill_container: true" doesn't fill the container.

Reason is most likely because the default "fill_container" property adds a class to the card that sets its height to 100%, however, with decluttering card, there is now an extra level of DOM depth, so technically it works, it's just setting it to 100% of the wrong container (namely the decluttering component, which is not taking the full height of its container)

Javascript errors shown in the web inspector (if applicable):

Additional information:

decluttering_templates:
  lights-for-room:
    card:
      type: custom:mushroom-light-card
      entity: '[[entity]]'
      name: '[[name]]'
      layout: vertical
      use_light_color: false
      show_brightness_control: true
      collapsible_controls: true
      show_color_temp_control: false
      icon_color: amber
      fill_container: true
      card_mod:
        style: |
          ha-card {
            {% if states(config.entity)=='on' %}
              --card-mod-icon: mdi:lightbulb-group;
              --ha-card-background: rgba(var(--rgb-amber), 0.8);
              --primary-text-color: black;
              --secondary-text-color: black;
              --control-height: 24px;
              --control-border-radius: 5px;
            {% else %}
              --card-mod-icon: mdi:lightbulb-group-outline;
            {% endif %};
          }
          mushroom-light-brightness-control {
            --slider-bg-color: var(--card-background-color) !important;
          }
          ha-card>mushroom-card>mushroom-state-item>mushroom-shape-icon {
            --shape-color: var(--card-background-color) !important;
            --icon-size: 56px;
          }
      double_tap_action:
        action: navigate
        navigation_path: /lovelace/[[navigation]]

[ildar170975]

Why an issue related to some other custom card is posted in this repo?

[TimGeerts]

I was under the assumption that the 'fill_container' property was part of the default HA lovelace cards.
If that is not the case, then I apologize and then it's most likely an issue with mushroom in combination with decluttering.

[ildar170975]

fill_container' property was part of the default HA lovelace cards.

No, this is definitely an option of your custom card.

issue with mushroom in combination with decluttering.

Mushroom card is just SOME card which may be placed into the decluttering card.
Suggest to:

• either fix your issue by card-mod,
• or ask a mushroom card's developer to solve the issue.

[bjw-s]

Just wanted to chime in and mention that this is a bit of a stalemate issue now. decluttering-card points towards mushroom card, and the other way around: piitaya/lovelace-mushroom#1133 which is not super productive.

Does anybody perhaps have any pointers how to fix this (with card-mod is fine if needed).

I've tried setting the fill-container class on the declutter-card like so:

  - type: "custom:decluttering-card"
    template: trash_tile
    variables:
      - entity: sensor.afvalwijzer_papier
    card-mod:
      class: fill-container

but that didn't do anything :(

Thank you!

[UnlimitedStack]

I had the same problem, with a decluttering card in a https://github.com/thomasloven/lovelace-layout-card.
It never filled the height of the row. I could fix this with card-mod by inserting the decluttering card in a mod-card:

decluttering_templates:
  your_template:

...

- type: custom:mod-card
  view_layout:
    grid-area: my_grid_area
  card_mod:
    style:
      decluttering-card$: | 
        div
        {
          height: 100%;                          
        }                   
        .: |
          ha-card
          {
            height: 100%;
          }                        
  card:
    type: custom:decluttering-card
    template: your_template

Hope this helps you too.

[igorsantos07]

This is definitely an issue with decluttering-card's extra wrapping element.

The mushroom card was just an example and, honestly, the response the OP got was quite rude. His example could be cleaner, indeed, but instead of throwing the issue into the mushroom card, some care should be taken to try to isolate the problem before deciding the culprit.

That said, luckily I was using simpler cards and can also see the issue; it's easily noticeable with a grid of button cards:

decluttering_templates:
  botao_comodo:
    card:
      type: button
      show_name: false
      show_icon: true
      entity: '[[entity]]'
      tap_action:
        action: toggle

.......

type: grid
square: true
cards:
  - type: custom:decluttering-card
    template: botao_comodo
    variables:
      - entity: light.entrada
  - type: button
    show_name: false
    show_icon: true
    entity: light.entrada
    tap_action:
      action: toggle

The decluttered card is as short as possible, and the pure button card is square, as expected.

If you set square: false on the grid, the buttons still have a different internal height (this is alleviated if you set show_name: true in both buttons, though):

---

Investigating markup, while trying to come up with a card_mod fix for my scenario, I found the following:

• setting max-width: fit-content in decluttering-card element helps with the width, when needed (e.g. in my scenario, I reduced the button card width with card_mod: { style: "ha-card { max-width: 80px }" }
• setting height: 100% in the inner div#root element would solve the height problem
  
• It's not possible to patch it with card_mod from the template settings itself, given the issue is upper in the decluttering tree. However, if you're using the repeated broken templates in a grid/stack, you can add something like this to the parent card (in my case, it's a vertical-stack of horizontal-stacks, this complex setup come from before grid existed; adapt as needed):

  card_mod:
    style:
      hui-vertical-stack-card $ hui-horizontal-stack-card $:
        .: |
          decluttering-card { max-width: fit-content }
        decluttering-card $: |
          div#root { height: 100% }