Overlaying multiple cards

maesenator · October 17, 2024, 8:37am

I’ve been fiddling around for 2 days in my dashboard to get the styling I need.
I can’t for the life of me figure out how to place a simple toggle switch on the same row as a timer bar card and make it look like it’s one card.

If anybody could help me out, that would be most appreciated

This is what it looks like now:

type: custom:timer-bar-card
state_color: true
mushroom: null
tap_action:
  action: toggle
bar_height: 10px
entities:
  - entity: switch.sprinklercontroller_backyard_group_1
    name: Achtertuin 1
    remain_time:
      entity: sensor.sprinklercontroller_remaining_time_current_valve
      units: seconds
    duration:
      entity: number.sprinklercontroller_backyard_group_1_duration
      units: minutes
  - entity: switch.sprinklercontroller_backyard_group_2
    name: Achtertuin 2
    remain_time:
      entity: sensor.sprinklercontroller_remaining_time_current_valve
      units: seconds
    duration:
      entity: number.sprinklercontroller_backyard_group_2_duration
      units: minutes
  - entity: switch.sprinklercontroller_backyard_group_3
    name: Achtertuin 3
    remain_time:
      entity: sensor.sprinklercontroller_remaining_time_current_valve
      units: seconds
    duration:
      entity: number.sprinklercontroller_backyard_group_3_duration
      units: minutes
  - entity: switch.sprinklercontroller_frontyard
    name: Voortuin
    remain_time:
      entity: sensor.sprinklercontroller_remaining_time_current_valve
      units: seconds
    duration:
      entity: number.sprinklercontroller_frontyard_duration
      units: minutes
layout_options:
  grid_columns: full

And this is what I’d like to achieve (paint skillz):

These are all the crappy creations I’ve come up with so far…

1st one:

type: custom:mod-card
card_mod:
  style:
    hui-horizontal-stack-card $: |
      div#root > :first-child > * {
        width: 10%;
        flex: auto; 
      }
      div#root > :last-child > * {
        width: 90%;
        flex: auto; 
      }
card:
  type: horizontal-stack
  cards:
    - type: vertical-stack
      cards:
        - type: custom:button-card
          entity: switch.sprinklercontroller_backyard_group_1_include_in_cycle
          show_icon: false
          show_name: false
          styles:
            card:
              - width: 80px
              - height: 80px
        - type: custom:button-card
          entity: switch.sprinklercontroller_backyard_group_1_include_in_cycle
          show_name: false
          styles:
            card:
              - width: 40px
              - height: 40px
    - type: custom:timer-bar-card
      state_color: true
      mushroom: null
      tap_action:
        action: toggle
      bar_height: 10px
      entities:
        - entity: switch.sprinklercontroller_backyard_group_1
          name: Achtertuin 1
          remain_time:
            entity: sensor.sprinklercontroller_remaining_time_current_valve
            units: seconds
          duration:
            entity: number.sprinklercontroller_backyard_group_1_duration
            units: minutes
        - entity: switch.sprinklercontroller_backyard_group_2
          name: Achtertuin 2
          remain_time:
            entity: sensor.sprinklercontroller_remaining_time_current_valve
            units: seconds
          duration:
            entity: number.sprinklercontroller_backyard_group_2_duration
            units: minutes
        - entity: switch.sprinklercontroller_backyard_group_3
          name: Achtertuin 3
          remain_time:
            entity: sensor.sprinklercontroller_remaining_time_current_valve
            units: seconds
          duration:
            entity: number.sprinklercontroller_backyard_group_3_duration
            units: minutes
        - entity: switch.sprinklercontroller_frontyard
          name: Voortuin
          remain_time:
            entity: sensor.sprinklercontroller_remaining_time_current_valve
            units: seconds
          duration:
            entity: number.sprinklercontroller_frontyard_duration
            units: minutes
      layout_options:
        grid_columns: 3

Tried using the stack-in cards…

type: custom:vertical-stack-in-card
horizontal: true
cards:
  - type: button
    entity: switch.sprinklercontroller_backyard_group_1_include_in_cycle
    show_name: false
    show_icon: true
    tap_action:
      action: toggle
  - type: custom:timer-bar-card
    state_color: true
    mushroom: null
    tap_action:
      action: toggle
    bar_height: 10px
    entities:
      - entity: switch.sprinklercontroller_backyard_group_1
        name: Achtertuin 1
        remain_time:
          entity: sensor.sprinklercontroller_remaining_time_current_valve
          units: seconds
        duration:
          entity: number.sprinklercontroller_backyard_group_1_duration
          units: minutes

and

type: custom:vertical-stack-in-card
horizontal: true styles
cards:
  - type: custom:mushroom-template-card
    primary: ""
    secondary: ""
    icon: mdi:toggle-switch
    entity: switch.sprinklercontroller_backyard_group_1_include_in_cycle
    layout: vertical
    layout_options:
      grid_columns: 1
      grid_rows: 1
  - type: custom:timer-bar-card
    state_color: true
    mushroom: null
    tap_action:
      action: toggle
    bar_height: 10px
    entities:
      - entity: switch.sprinklercontroller_backyard_group_1
        name: Achtertuin 1
        remain_time:
          entity: sensor.sprinklercontroller_remaining_time_current_valve
          units: seconds
        duration:
          entity: number.sprinklercontroller_backyard_group_1_duration
          units: minutes
    layout_options:
      grid_columns: 3

and finally…

type: custom:vertical-stack-in-card
horizontal: true
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout: 1fr 1fr 1fr
    margin: 0px 0px 0px 0px
    cards:
      - type: custom:mushroom-template-card
        primary: ""
        secondary: ""
        icon: mdi:toggle-switch
        entity: switch.sprinklercontroller_backyard_group_1_include_in_cycle
        layout: vertical
        card_mod:
          style: |
            ha-card {
              border: none !important;
                }
      - type: custom:timer-bar-card
        state_color: true
        mushroom: null
        tap_action:
          action: toggle
        bar_height: 10px
        entities:
          - entity: switch.sprinklercontroller_backyard_group_1
            name: Achtertuin 1
            remain_time:
              entity: sensor.sprinklercontroller_remaining_time_current_valve
              units: seconds
            duration:
              entity: number.sprinklercontroller_backyard_group_1_duration
              units: minutes
        card_mod:
          style: |
            ha-card {
              border: none !important;
                }

You probably don’t need all of my crappy code, but I wanted to show you that I’ve tried a lot and didn’t just come here to get someone else to do all the work for me

parautenbach · October 17, 2024, 3:45pm

Have you tried this one?

maesenator · October 18, 2024, 10:47am

Thanks for the tip!

I just tried it, but it appears that this card cannot be combined with the “timer-bar-card” that I’m currently using.

FYI, this is what the timer-bar-card does:

parautenbach · October 18, 2024, 6:48pm

Bummer.

Maybe try the stack in card, or maybe a grid layout and/or the custom button card.

I have that timer card too, but haven’t tried to combine it like that.

Ildar_Gabdullin · October 18, 2024, 10:45pm

If by “overlaying” we mean “place 2 row-like cards into one row seamlessly”:

If both cards should occupy 50% of width - stack-in-card can be used.
If one card should occupy 30% and another card - 70% - then suggest to use layout-card. Ofc stack in card + card-mod can be used too but you will see an undesired transition effect.

parautenbach · October 19, 2024, 5:07am

Yes, lots of options. One will need to experiment a bit to see what works best.

maesenator · October 21, 2024, 10:03am

This is great! Thank you!
I went with the lay-out card and got pretty close to my result!

Ideally i’d like to get rid of the massive spaces between the rows though. In a perfect world I’d even like to get rid of all the borders and make it look like 1 big card with less spacing between the rows.
I’ve tried fiddling around with the layout options of the layout-card but other than being able to remove the massive padding around the entire card, I’ve not been able to manipulate the remainder of what I’m trying to achieve.
Any tips on that one?

Ildar_Gabdullin · October 21, 2024, 9:16pm

Probably may be modded by card-mod. Suggest to ask in the main card-mod thread.