How to adjust column width in horizontal stacks?

Hello everyone,
I would like to create a simple horizontal stack with a slider plus a vertical stack with 3 buttons. I would like the buttons to be narrower than the slider, so the left horizontal stack card should be e.g. 75 % total width and the vertical stack buttons 25 %.
image

Is this possible?
I saw that there is a lovelace layout card by thomas loven but that seems very complicated for such a seemingly simple task. I am not that familiar with CSS and mediaquery, so if there is a simpler solution, that would be great :slight_smile:

The last example:

2 Likes

Thank you @Ildar_Gabdullin

That works perfectly!

Is it possible to make the vertical stack fill the space it has, though? The button height is not adjusted to use the full space available.
image

type: custom:mod-card
style:
  hui-horizontal-stack-card$: |
    hui-entities-card {
      margin-left: 0px !important;
      margin-right: 0px !important;
      margin-bottom: 0px !important;
      width: 75%;
      flex: unset !important; 
    }
    mini-graph-card {
      margin-right: 0px !important;
      margin-bottom: 0px !important;
      flex: unset !important; 
    }
card:
  type: horizontal-stack
  cards:
    - type: entities
      title: Living Room
      entities:
        - type: custom:slider-entity-row
          entity: climate.eq_3_living_room
          name: Living Room
          min: 4.5
          max: 23
          step: 0.5
          hide_state: false
          icon: |
            [[[
              if (entity.attributes.temperature == 4.5)
              return "mdi:snowman";
              return "mdi:fire";
            ]]]
      state_color: true
    - type: vertical-stack
      cards:
        - type: custom:button-card
          entity: climate.eq_3_living_room
          name: 'Off'
          show_name: true
          show_icon: false
          show_state: false
          state:
            - operator: template
              value: '[[[ return entity.attributes.temperature == 4.5; ]]]'
              color: rgb(255, 0, 0)
          tap_action:
            action: call-service
            service: climate.set_temperature
            service_data:
              temperature: 4.5
              entity_id: climate.eq_3_living_room
        - type: custom:button-card
          entity: climate.eq_3_living_room
          name: 18 °C
          show_name: true
          show_icon: false
          show_state: false
          state:
            - operator: template
              value: '[[[ return entity.attributes.temperature == 18; ]]]'
              color: rgb(255, 0, 0)
          tap_action:
            action: call-service
            service: climate.set_temperature
            service_data:
              temperature: 18
              entity_id: climate.eq_3_living_room
        - type: custom:button-card
          entity: climate.eq_3_living_room
          name: 20 °C
          show_name: true
          show_icon: false
          show_state: false
          state:
            - operator: template
              value: '[[[ return entity.attributes.temperature == 20; ]]]'
              color: rgb(255, 0, 0)
          tap_action:
            action: call-service
            service: climate.set_temperature
            service_data:
              temperature: 20
              entity_id: climate.eq_3_living_room

It does work, when I remove the title, but then the slider is no longer centered:
image

type: custom:mod-card
style:
  hui-horizontal-stack-card$: |
    hui-entities-card {
      margin-left: 0px !important;
      margin-right: 0px !important;
      margin-bottom: 0px !important;
      width: 75%;
      flex: unset !important; 
    }
    mini-graph-card {
      margin-right: 0px !important;
      margin-bottom: 0px !important;
      flex: unset !important; 
    }
card:
  type: horizontal-stack
  cards:
    - type: entities
      entities:
        - type: custom:slider-entity-row
          entity: climate.eq_3_living_room
          name: Living Room
          min: 4.5
          max: 23
          step: 0.5
          hide_state: false
          icon: |
            [[[
              if (entity.attributes.temperature == 4.5)
              return "mdi:snowman";
              return "mdi:fire";
            ]]]
      state_color: true
    - type: vertical-stack
      cards:
        - type: custom:button-card
          entity: climate.eq_3_living_room
          name: 'Off'
          show_name: true
          show_icon: false
          show_state: false
          state:
            - operator: template
              value: '[[[ return entity.attributes.temperature == 4.5; ]]]'
              color: rgb(255, 0, 0)
          tap_action:
            action: call-service
            service: climate.set_temperature
            service_data:
              temperature: 4.5
              entity_id: climate.eq_3_living_room
        - type: custom:button-card
          entity: climate.eq_3_living_room
          name: 18 °C
          show_name: true
          show_icon: false
          show_state: false
          state:
            - operator: template
              value: '[[[ return entity.attributes.temperature == 18; ]]]'
              color: rgb(255, 0, 0)
          tap_action:
            action: call-service
            service: climate.set_temperature
            service_data:
              temperature: 18
              entity_id: climate.eq_3_living_room
        - type: custom:button-card
          entity: climate.eq_3_living_room
          name: 20 °C
          show_name: true
          show_icon: false
          show_state: false
          state:
            - operator: template
              value: '[[[ return entity.attributes.temperature == 20; ]]]'
              color: rgb(255, 0, 0)
          tap_action:
            action: call-service
            service: climate.set_temperature
            service_data:
              temperature: 20
              entity_id: climate.eq_3_living_room

2 Likes

Try using grid card or layout-card.

Strange. May be you should look at the layout-card and replace the horizontal-stack…

I quite like the simplicity of the card-mod. Isn’t the layout-card meant to control the entire dashboard rather than just the content of one card?

I am not an expert on layout-card but know that it can do both.