Size of card

[PierreScerri]

I recently came across your shutter-row card. It is what I have been looking for. Till now I was using a standard entity card followed by slider-entity-row like so:

type: entities
entities:
  - entity: cover.all_shutters
    secondary_info: last-changed
  - type: custom:slider-entity-row
    full_row: true
    entity: cover.all_shutters

giving:

This works well but is more laborious to do for 15 shutters.

Now we come to your card.

I have defined the same shutter thus:

type: entities
entities:
  - type: custom:shutter-row
    entity: cover.all_shutters
state_color: true
show_header_toggle: false

or

square: false
columns: 1
type: grid
cards:
  - type: custom:shutter-row
    entity: cover.all_shutters

I have these issues

1. Positions do not tally
2. The height of your card is greater than the other 2 combined. This increases the overall size of the grid. How can I reduce this?
3. Cannot get the icon to change colour with state. These issues are evident in the screenshot:

Your comments would be most appreciated.

Thank you

[berrywhite96]

1. Positions do not tally

The position on my card is the correct value from the entity, the slider entity row card sets the value so that it can be divided by 5.

2. The height of your card is greater than the other 2 combined. This increases the overall size of the grid. How can I reduce this?

This is nothing related to my card, maybe you should take a look into lovelace-card-mod.

3. Cannot get the icon to change colour with state.

Sounds like something for my todo list.

[PierreScerri]

Hi

Thank you for your reply.

I accept explanation for 1. & 3.

Re 2. I tried card-mod. Does not respond to height variable. In any case, the height of 2 separate cards is less than your card. Can I make your card shorter? There is too much space top and bottom.

Thank you.

On 07 Sep 2022, at 16:26, berrywhite96 @.***> wrote:

Positions do not tally The position on my card is the correct value from the entity, the slider entity row card sets the value so that it can be divided by 5.

The height of your card is greater than the other 2 combined. This increases the overall size of the grid. How can I reduce this? This is nothing related to my card, maybe you should take a look into lovelace-card-mod https://github.com/thomasloven/lovelace-card-mod.

Cannot get the icon to change colour with state. Sounds like something for my todo list.

— Reply to this email directly, view it on GitHub https://github.com/berrywhite96/lovelace-shutter-row/issues/7#issuecomment-1239464988, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIFW2Y3ZGNHFLWAIZNLYV43V5CQ2NANCNFSM6AAAAAAQGUNWNM. You are receiving this because you authored the thread.

[berrywhite96]

Re 2. I tried card-mod. Does not respond to height variable. In any case, the height of 2 separate cards is less than your card. Can I make your card shorter? There is too much space top and bottom. Thank you.

That's not how CSS works. Try adjusting the padding size of the card like

ha-card { padding: 10px; }

If that's not enough look into the src/style.css on the repo and try adjusting other elements.

[oneteam2win]

I took the hint from this thread and thread #9 about using car_mod. Unfortunately, it doesn't work for me. Neither in Edge nor in Chrome. Where is my mistake?

  - type: image
    entity: cover.velux_window_roof_window
    state_image:
      open: /local/ui/floorplan/lite-on.png
      closed: /local/ui/floorplan/lite-off.png
      half-open: /local/ui/floorplan/lite-unavailable.png
    style:
      top: 5%
      left: 50.5%
      width: 2%
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: roof-window
          content:
            type: custom:shutter-row
            entity: cover.velux_window_roof_window
            name: Garden
            invert_position: false
            state_color: true
            card_mod:
              style: |
                ha-card { border: yes; padding: 100px; }

[berrywhite96]

Released with v0.3.0.