Restriction Card does not fill row

[gthbusrr]

Checklist:

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

Release with the issue: 1.2.9 Last working release (if known): New Install Browser and Operating System: Firefox / MacOS Firefox / Android Companion App / Android

Description of problem: ^ w/ Restriction Card

^ w/o Restriction Card

Config:

  - type: custom:restriction-card
    card:
      type: tile
      entity: automation.motion_detected_lights
      vertical: true
      hide_state: true
      show_entity_picture: false
      name: Motion Sensor - Living Room
      tap_action:
        action: toggle
      icon_tap_action:
        action: toggle
      color: primary
    layout_options:
      grid_columns: 2
      grid_rows: 2
    card_mod:
      style: |
        ha-card {
          height: 100%
        }

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

Additional information:

[ildar170975]

Retest w/o card-mod which is a separate plugin and not discussed here. Also, layout_options is not an option of the restriction-card.

[gthbusrr]

Retest w/o card-mod which is a separate plugin and not discussed here. Also, layout_options is not an option of the restriction-card.

@ildar170975 Removed, same result.

[ildar170975]

@gthbusrr I see. I am far from a PC, will test it in 10 days.

[ildar170975]

@gthbusrr Please provide a detailed description of the issue. What row are you talking about? Is it a section, grid, .. ?

If this is about a grid with square cells:

type: grid
square: true
cards:
  - type: custom:restriction-card
    card:
      type: entity
      entity: sun.sun
  - type: entity
    entity: sun.sun
  - type: history-graph
    entities:
      - sun.sun
  - type: custom:restriction-card
    card:
      type: entity
      entity: sun.sun
columns: 2

then I agree - there is an issue, a card does not fill a whole cell:

Can be fixed by card-mod:

type: custom:mod-card
card_mod:
  style:
    hui-grid-card $:
      hui-card:
        restriction-card $: |
          :first-child, div#card {
            height: 100%;
          }
        .: |
          restriction-card {
            height: 100%;
          }
card:
  type: grid
  square: true
  cards:
    - type: custom:restriction-card
      card:
        type: entity
        entity: sun.sun
    - type: entity
      entity: sun.sun
    - type: history-graph
      entities:
        - sun.sun
    - type: custom:restriction-card
      card:
        type: entity
        entity: sun.sun
  columns: 2

[gthbusrr]

@ildar170975

Hi it's a section:

Yaml of the section

type: grid
cards:
  - type: custom:restriction-card
    card:
      type: tile
      entity: automation.leave_home
      vertical: true
      hide_state: true
      show_entity_picture: false
      tap_action:
        action: toggle
      icon_tap_action:
        action: toggle
      color: primary
      name: Leave Home
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: custom:restriction-card
    card:
      type: tile
      entity: automation.arrived_home
      vertical: true
      hide_state: true
      show_entity_picture: false
      name: Arrive Home
      tap_action:
        action: toggle
      icon_tap_action:
        action: toggle
      color: primary
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: custom:restriction-card
    card:
      type: tile
      entity: automation.door_opened
      vertical: true
      hide_state: true
      show_entity_picture: false
      name: Door Opened
      tap_action:
        action: toggle
      icon_tap_action:
        action: toggle
      color: primary
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: custom:restriction-card
    card:
      type: tile
      entity: automation.front_door_lock_notification
      vertical: true
      hide_state: true
      show_entity_picture: false
      name: Door Lock Notification
      tap_action:
        action: toggle
      icon_tap_action:
        action: toggle
      color: primary
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: custom:restriction-card
    card:
      type: tile
      entity: automation.camera_motion_detected
      vertical: true
      hide_state: true
      show_entity_picture: false
      name: Camera Motion Detection
      tap_action:
        action: toggle
      icon_tap_action:
        action: toggle
      color: primary
    layout_options:
      grid_columns: full
      grid_rows: 2
  - type: custom:restriction-card
    card:
      type: custom:card-templater
      card:
        type: tile
        entity: input_boolean.enable_home_security
        hide_state: true
        vertical: true
        show_entity_picture: false
        tap_action:
          action: call-service
          service: input_boolean.toggle
          target:
            entity_id: input_boolean.enable_home_security
        icon_tap_action:
          action: call-service
          service: input_boolean.toggle
          target:
            entity_id: input_boolean.enable_home_security
        name_template: >-
          Home Security {% if is_state('input_boolean.enable_home_security',
          'on') %} Enabled {% else %} Disabled {% endif %}
        card_mod:
          style: |
            ha-tile-icon {
              {% if is_state('input_boolean.enable_home_security', 'on') %}
              --tile-color: orange !important;
              {% else %}
              --tile-color: grey !important;
              {% endif %}
            }
      entities:
        - input_boolean.enable_home_security
    layout_options:
      grid_columns: full
      grid_rows: 2
title: Home Security

This is what it looks like now (w/ the yaml above)

Expected result: Achieved by:

type: grid
cards:
  - type: tile
    entity: automation.leave_home
    vertical: true
    hide_state: true
    show_entity_picture: false
    tap_action:
      action: toggle
    icon_tap_action:
      action: toggle
    color: primary
    name: Leave Home
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: tile
    entity: automation.arrived_home
    vertical: true
    hide_state: true
    show_entity_picture: false
    name: Arrive Home
    tap_action:
      action: toggle
    icon_tap_action:
      action: toggle
    color: primary
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: tile
    entity: automation.door_opened
    vertical: true
    hide_state: true
    show_entity_picture: false
    name: Door Opened
    tap_action:
      action: toggle
    icon_tap_action:
      action: toggle
    color: primary
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: tile
    entity: automation.front_door_lock_notification
    vertical: true
    hide_state: true
    show_entity_picture: false
    name: Door Lock Notification
    tap_action:
      action: toggle
    icon_tap_action:
      action: toggle
    color: primary
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: tile
    entity: automation.camera_motion_detected
    vertical: true
    hide_state: true
    show_entity_picture: false
    name: Camera Motion Detection
    tap_action:
      action: toggle
    icon_tap_action:
      action: toggle
    color: primary
    layout_options:
      grid_columns: full
      grid_rows: 2
  - type: custom:card-templater
    card:
      type: tile
      entity: input_boolean.enable_home_security
      hide_state: true
      vertical: true
      show_entity_picture: false
      tap_action:
        action: call-service
        service: input_boolean.toggle
        target:
          entity_id: input_boolean.enable_home_security
      icon_tap_action:
        action: call-service
        service: input_boolean.toggle
        target:
          entity_id: input_boolean.enable_home_security
      name_template: >-
        Home Security {% if is_state('input_boolean.enable_home_security', 'on')
        %} Enabled {% else %} Disabled {% endif %}
      card_mod:
        style: |
          ha-tile-icon {
            {% if is_state('input_boolean.enable_home_security', 'on') %}
            --tile-color: orange !important;
            {% else %}
            --tile-color: grey !important;
            {% endif %}
          }
    entities:
      - input_boolean.enable_home_security
    layout_options:
      grid_columns: full
      grid_rows: 2
title: Home Security

[ildar170975]

You have plenty of custom cards/plugins unrelated to the restriction-card. Suggest you to prepare a SHORT minimal working example.

[gthbusrr]

@ildar170975 Here's an example with only restriction-card & built in tile card:

type: grid
cards:
  - type: custom:restriction-card
    card:
      type: tile
      entity: automation.leave_home
      vertical: true
      hide_state: true
      show_entity_picture: false
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: custom:restriction-card
    card:
      type: tile
      entity: automation.arrived_home
      vertical: true
      hide_state: true
      show_entity_picture: false
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: custom:restriction-card
    card:
      type: tile
      entity: automation.door_opened
      vertical: true
      hide_state: true
      show_entity_picture: false
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: custom:restriction-card
    card:
      type: tile
      entity: automation.front_door_lock_notification
      vertical: true
      hide_state: true
      show_entity_picture: false
    layout_options:
      grid_columns: 2
      grid_rows: 2
title: Home Security

Expected result:

type: grid
cards:
  - type: tile
    entity: automation.leave_home
    vertical: true
    hide_state: true
    show_entity_picture: false
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: tile
    entity: automation.arrived_home
    vertical: true
    hide_state: true
    show_entity_picture: false
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: tile
    entity: automation.door_opened
    vertical: true
    hide_state: true
    show_entity_picture: false
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: tile
    entity: automation.front_door_lock_notification
    vertical: true
    hide_state: true
    show_entity_picture: false
    layout_options:
      grid_columns: 2
      grid_rows: 2
title: Home Security

[ildar170975]

1. The layout_options part does not belong neither to a tile card, nor to restriction-card. It should not be there.
2. The 1st example you posted is about placing restriction-card into a Grid card. It is similar to what I posted here (only difference is that you pasted a tile card). But you claimed that the issue is about "sections", not a Grid card. The "sections" is an experimental type of a view; are you sure that that you understand the "section" term properly?

[gthbusrr]

@ildar170975

1. The layout_options is part of the section. See https://www.home-assistant.io/blog/2024/09/04/release-20249/#sections-go-big
2. "Sections" is the dashboard view type, in the dashboard, there are individual "Sections". When you edit the individual "section", the header shows Edit section. See terminology used in Home Assistant Documentation for Sections: https://www.home-assistant.io/dashboards/sections/#deleting-a-section a. I tried your yaml but it either makes it extra large:

   type: custom:mod-card
   card_mod:
   style:
   hui-grid-card $:
     hui-card:
       restriction-card $: |
         :first-child, div#card {
           height: 100%;
         }
       .: |
         restriction-card {
           height: 100%;
         }
   card:
   type: grid
   columns: 2
   cards:
   - type: custom:restriction-card
     card:
       type: tile
       entity: automation.leave_home
       vertical: true
       hide_state: true
       show_entity_picture: false
       tap_action:
         action: toggle
       icon_tap_action:
         action: toggle
       color: primary
       name: Leave Home
     layout_options:
       grid_columns: 2
       grid_rows: 2
   - type: custom:restriction-card
     card:
       type: tile
       entity: automation.arrived_home
       vertical: true
       hide_state: true
       show_entity_picture: false
       name: Arrive Home
       tap_action:
         action: toggle
       icon_tap_action:
         action: toggle
       color: primary
     layout_options:
       grid_columns: 2
       grid_rows: 2
   - type: custom:restriction-card
     card:
       type: tile
       entity: automation.door_opened
       vertical: true
       hide_state: true
       show_entity_picture: false
       name: Door Opened
       tap_action:
         action: toggle
       icon_tap_action:
         action: toggle
       color: primary
     layout_options:
       grid_columns: 2
       grid_rows: 2
   - type: custom:restriction-card
     card:
       type: tile
       entity: automation.front_door_lock_notification
       vertical: true
       hide_state: true
       show_entity_picture: false
       name: Door Lock Notification
       tap_action:
         action: toggle
       icon_tap_action:
         action: toggle
       color: primary
     layout_options:
       grid_columns: 2
       grid_rows: 2
   title: Home Security

   or extra tiny:

   type: custom:mod-card
   card_mod:
   style:
   hui-grid-card $:
     hui-card:
       restriction-card $: |
         :first-child, div#card {
           height: 100%;
         }
       .: |
         restriction-card {
           height: 100%;
         }
   card:
   type: grid
   columns: 2
   square: false
   cards:
   - type: custom:restriction-card
     card:
       type: tile
       entity: automation.leave_home
       vertical: true
       hide_state: true
       show_entity_picture: false
       tap_action:
         action: toggle
       icon_tap_action:
         action: toggle
       color: primary
       name: Leave Home
     layout_options:
       grid_columns: 2
       grid_rows: 2
   - type: custom:restriction-card
     card:
       type: tile
       entity: automation.arrived_home
       vertical: true
       hide_state: true
       show_entity_picture: false
       name: Arrive Home
       tap_action:
         action: toggle
       icon_tap_action:
         action: toggle
       color: primary
     layout_options:
       grid_columns: 2
       grid_rows: 2
   - type: custom:restriction-card
     card:
       type: tile
       entity: automation.door_opened
       vertical: true
       hide_state: true
       show_entity_picture: false
       name: Door Opened
       tap_action:
         action: toggle
       icon_tap_action:
         action: toggle
       color: primary
     layout_options:
       grid_columns: 2
       grid_rows: 2
   - type: custom:restriction-card
     card:
       type: tile
       entity: automation.front_door_lock_notification
       vertical: true
       hide_state: true
       show_entity_picture: false
       name: Door Lock Notification
       tap_action:
         action: toggle
       icon_tap_action:
         action: toggle
       color: primary
     layout_options:
       grid_columns: 2
       grid_rows: 2
   title: Home Security

[ildar170975]

The layout_options is part of the section

~Yet you define this option for a card.~ I see, got your point.

"Sections" is the dashboard view type

As I told you - this is not about sections, it is about Grid which you are using inside your sections.

I tried your yaml but it either makes it extra large:

This is EXPECTED behaviour - the 1st Grid is with square cells (height=width for squares), the 2nd with not square cells (height is normal, not tiny).

[ildar170975]

Conclusion: workaround is provided here: https://github.com/iantrich/restriction-card/issues/117#issuecomment-2384618648 You may provide a PR to fix it inside the card to avoid using card-mod.