Need help to apply card_mod on horizontal-stack

Configuration Frontend
1

Hi:

I’m creating a view with horizontal-stack and I’d like to define the max-width so it aligns with the picture element card with floor plan (in resolution 1200px). I have the code below but doesn’t look like it applies, the same card_mod code works fine for picture element card though. Any suggestion?

type: horizontal-stack
cards:
  - show_current: true
    show_forecast: true
    type: weather-forecast
    entity: weather.openweathermap
    forecast_type: daily
  - type: vertical-stack
    cards:
      - type: tile
        entity: switch.adaptive_lighting_indoor_lights
        name: Adaptive Lighting
        state_content: color_temp_kelvin
        vertical: false
        features_position: bottom
     ......
     ......
card_mod:
  style: |
    ha-card {
      max-width: 1200px;
      height: 100%;      
    }
2

card_mod styles won’t work on horizontal-stack or in general cards that contain other cards. Per the card-mod documentation:

NOTE: card-mod only works on cards that contain a ha-card element. This includes almost every card which can be seen, but not e.g. conditional, entity_filter, vertical-stack, horizontal-stack, grid.

Without knowing exactly what you’re trying to do it’s hard to say what the best alternative is, but maybe just try to ensure that whatever cards you are working with are in a container that already is the width you want? That way you don’t have to worry about styling every card within it to be a certain width.

You can also check out the layout-card plugin (by the same author as card-mod), which gives you lots of flexibility in setting up grid layouts.

1 Like
3

Thanks will check the layout card!

4

This will change in v4 which is available for testing in beta release. In v4 all cards using hui-card will be supported. Moreover, hui-card will be the preferred patch route ahead of ha-card. However, for a layout view adjustment I would go for layout card, but note that itneeds an update for its GUI editor due to recent Frontend changes.

2 Likes