Card-Mod, set horizontal stack widths?

Configuration Frontend
,
1

I have Card-Mod installed. I wanted to create a horizontal stack, and set the left two items at 42% each, and the third (rightmost item) at 14%. But I cannot see how to do that with the examples at:

This is the UI at this time:

image
image676×372 16.1 KB

I tried this option

type: custom:mod-card
card_mod:
  style:
    hui-horizontal-stack-card $: |
      div#root > :first-child {
        width: 42%;
        flex: auto; 
      }
      div#root > :last-child {
        width: 16%;
        flex: auto; 
      }
card:

but that did nothing. Note that I have a vertical stack with a markdown at the top, then a horizontal stack with mushroom light card, mushroom fan card, and a button. Then there is another horizontal card with two entities.

If someone can point me in the right direction, that would be much appreciated.

To be clear, the light fan, and whoosh horizontal stack is the one that I want to set 42, 42, 16 on.
Cheers.

1 Like
2

I figured out something that will work:
image

Hope this helps someone else.

type: vertical-stack
cards:
  - type: markdown
    content: <b><font color="Cyan" size="6">Sierra</font></b>
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-light-card
        entity: light.sierra_fan
        show_brightness_control: true
        name: Light
        card_mod: null
        style: |
          ha-card {
            width: 90%;
          }
      - type: custom:mushroom-fan-card
        entity: fan.sierra_fan
        show_percentage_control: true
        name: Fan
        icon_animation: true
        card_mod: null
        style: |
          ha-card {
            left: -18px;
            width: 169%;
          }
      - type: button
        name: Whoosh
        show_name: true
        show_icon: true
        tap_action:
          action: toggle
        entity: switch.sierra_fan_whoosh
        show_state: true
        icon_height: 20px
        card_mod: null
        style: |
          ha-card {
            left: 86px;
            width: 45%;
          }
2 Likes
3

Alternatively you could user Layout Card and set it as a grid.

4

Hi @megapint !
I’m trying similar thing, but only with 2 elements. I want to see only the mushroom-template-card like a 25% of the row, and the mushroom-select-card the 75%.
Can you help me, please?

Ejemplo

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    icon: mdi:scent
    icon_color: >
      {{ 'green' if is_state('switch.enchufe_aromatizacion', 'on') else
      'disabled' }}
    primary: ""
    secondary: ""
    tap_action:
      action: none
   
    fill_container: false
  - type: custom:mushroom-select-card
    entity: input_select.modo_aromatizacion
    layout: horizontal
5

I’d suggest the layout card using the grid option

type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 25% 75%
    cards:
1 Like
6

Thanks @LiQuid_cOOled !! I tried and it worked fine.
The only thing is that I couldn’t apply stack-in-card, but finally I decided only to use a mushroom-select-card, changing the tap_action to the switch instead of the input_select :slight_smile:
But I’m sure I will use the grid layout in other cards!
Thanks again for your help!