Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Restriction Card does not fill row #117

Open
2 tasks done
gthbusrr opened this issue Sep 22, 2024 · 11 comments
Open
2 tasks done

Restriction Card does not fill row #117

gthbusrr opened this issue Sep 22, 2024 · 11 comments
Labels
bug Something isn't working

Comments

@gthbusrr
Copy link

Checklist:

  • I updated to the latest version available
  • 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/ Restriction Card
w/o 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:
@gthbusrr gthbusrr added the bug Something isn't working label Sep 22, 2024
@ildar170975
Copy link
Collaborator

ildar170975 commented Sep 22, 2024 •
edited
Loading

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
Copy link
Author

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.
image

@ildar170975
Copy link
Collaborator

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

@ildar170975
Copy link
Collaborator

ildar170975 commented Oct 1, 2024 •
edited
Loading

@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:
image

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

image

@ildar170975 ildar170975 added the question Further information is requested label Oct 1, 2024
@gthbusrr
Copy link
Author

gthbusrr commented Oct 1, 2024

@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)
image

Expected result:
image
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
Copy link
Collaborator

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

@gthbusrr
Copy link
Author

gthbusrr commented Oct 1, 2024

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

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:
image

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
Copy link
Collaborator

  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
Copy link
Author

gthbusrr commented Oct 2, 2024

@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:
    image
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:
image

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
Copy link
Collaborator

ildar170975 commented Oct 2, 2024 •
edited
Loading

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
Copy link
Collaborator

Conclusion: workaround is provided here: #117 (comment)
You may provide a PR to fix it inside the card to avoid using card-mod.

@ildar170975 ildar170975 removed the question Further information is requested label Oct 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ildar170975 @gthbusrr