#Change horizontal-stack column width?

1 messages · Page 1 of 1 (latest)

golden rock
#

Ok thank you.
How could I change the horizontal-stack width?
I found this example but not sure what I'm doing wrong?

type: 'custom:mod-card'
style:
  hui-horizontal-stack-card$: |
    hui-tile-card {
      margin-left: 10px !important;
      margin-right: 10px !important;
      margin-bottom: 10px !important;
      width: 150%;
      flex: auto !important; 
    }
    hui-button-card {
      margin-right: 10px !important;
      margin-bottom: 10px !important;
      flex: auto !important; 
    }
  .: |
    ha-card {
      background-color: darkslategrey;
      --ha-card-background: rgba(50,50,50,0.1);
    }
card:
  type: horizontal-stack
  title: Primary Bedroom
  cards:
    - type: tile
      entity: fan.master_bedroom_fan
      features:
          - type: fan-speed
    - type: button
      entity: light.master_bedroom_light
      name: Ceiling Fan Light
      show_state: false
      show_name: false
#

Their very last example.

#

Want the tile fan card to basically take up 75% of the space and the light to be 25%

#

Instead of equally sharing the space.

#

Change horizontal-stack column width?

#

Guess I needed hui-button-card instead of button-card etc

#

Now how do I embed that into grid to add entities under it?

golden rock
# 
type: grid
title: Primary Bedroom
square: false
columns: 1
cards:
  - type: custom:mod-card
    card_mod:
      style:
        hui-horizontal-stack-card$: |
          hui-tile-card {
            margin-left: 10px !important;
            margin-right: 10px !important;
            margin-bottom: 10px !important;
            width: 150%;
            flex: auto !important; 
          }
          hui-button-card {
            margin-right: 10px !important;
            margin-bottom: 10px !important;
            flex: auto !important; 
          }
        .: |
          ha-card {
            background-color: darkslategrey;
            --ha-card-background: rgba(50,50,50,0.1);
          }
      card:
        type: horizontal-stack
        cards:
          - type: tile
            entity: fan.master_bedroom_fan
            features:
              - type: fan-speed
          - type: button
            entity: light.master_bedroom_light
            name: Ceiling Fan Light
            show_state: false
            show_name: false
            features:
              - type: light-brightness
  - type: entities
    entities:
      - entity: sensor.aht21_sensor_temperature
        name: Temperature
      - entity: sensor.aht21_sensor_humidity
      - entity: sensor.ens160_sensor_air_quality_index
      - entity: sensor.ens160_sensor_eco2
      - entity: sensor.ens160_sensor_total_volatile_organic_compounds
#

Something like this but it removes the horizontal-stack

#

(I'm sure I am just not nesting the cards properly)

#

Not sure about all those card, cards, etc

golden rock
# 
type: grid
title: Primary Bedroom
square: false
columns: 1
cards:
  - type: custom:mod-card
    card_mod:
      style:
        hui-horizontal-stack-card$: |
          hui-tile-card {
            margin-left: 0px !important;
            margin-right: 0px !important;
            margin-bottom: 0px !important;
            width: 150%;
            flex: auto !important; 
          }
          hui-button-card {
            margin-left: 0px !important;
            margin-right: 0px !important;
            margin-bottom: 0px !important;
            flex: auto !important; 
          }
        .: |
          ha-card {
            background-color: darkslategrey;
            --ha-card-background: rgba(50,50,50,0.1);
            --ha-card-border-width: 0;
          }
    card:
      type: horizontal-stack
      cards:
        - type: tile
          entity: fan.master_bedroom_fan
          features:
            - type: fan-speed
        - type: button
          entity: light.master_bedroom_light
          name: Ceiling Fan Light
          show_state: false
          show_name: false
  - type: entities
    entities:
      - entity: sensor.aht21_sensor_temperature
        name: Temperature
      - entity: sensor.aht21_sensor_humidity
      - entity: sensor.ens160_sensor_air_quality_index
      - entity: sensor.ens160_sensor_eco2
      - entity: sensor.ens160_sensor_total_volatile_organic_compounds