j9brown / decluttering-card

๐Ÿงน Declutter your lovelace configuration with the help of this card
MIT License
7 stars 0 forks source link

Section View: Implement `grid_rows` #1

Open NickChristensen opened 4 hours ago

NickChristensen commented 4 hours ago

Is your feature request related to a problem? Please describe. It doesn't look like decluttering-card has implemented grid_rows (part of layout_options), which controls height in section view. grid_columns does work as expected. I've tried adding it to both the template, inside the card object, and in the decluttering-card instance itself, neither seems to affect row height.

For example:

layout_options:
  grid_columns: 3
  grid_rows: 2

Works correctly for the default tile card on left, but not the templated decluttering-card on right:

image

Describe the solution you'd like In either the template definition or the decluttering-card instance, setting grid_rows should set the height of the card.

NickChristensen commented 3 hours ago

I did some further digging and I think the actual issue is <decluttering-card>'s <div id="root"> not expanding to fill the height.

In section mode, the section .container div sets a height for each child with .fit-rows. This is what the markup structure looks like for a tile card:

<div style="--column-size:3;--row-size:2;" class="card fit-rows "> โ† calculated height
  <hui-card>
    <hui-tile-card>
      <ha-card> โ† height: 100%, expands to fill .fit-rows div

This is what is looks like for a decluttering card:

<div style="--column-size:3;--row-size:2;" class="card fit-rows "> โ† calculated height
  <hui-card>
    <decluttering-card>
      <div id="root"> โ† no height set
        <hui-tile-card id="declutter-child">
          <ha-card> โ† height: 100%, only expands to fill #root