Align size of Widgets

Configuration
1

How would I best align the size of two widgets i.e. in a horizontal stack to work as headlines?
image
Perfect would be to set the absolute size for different horizontal stack cards in different colums?

image
image1356×334 101 KB

2

Only certain cards have this ability and they’ll do it automatically. Otherwise, you’ll have to use card modder or card mod to get what you want. Even then it may not work if the js overrides the css.

3

Yes, saw card_modder, but that is deprecated and I haven’t found examples doing what I’m looking for with card_mod. Might you have one manipulating the size?

4

No i don’t but the css would be height

1 Like
5

Thanks for the hints.
Fairly easy, but as your wrote, may not work.
Left card with height 220 and right one with 146 to have them a similar height.

  - cards:
      - content: ' <img src="....." width="100">  '
        tap_action:
          action: none
        title: Docker Container
        type: markdown
        style: |
          ha-card {
            background: rgba(0,0,0,0.0);
            border-radius: 15px;
            height: 220px
          }        
      - entity: sensor.coreos_containers_active
        scale: 60px
        title: Anzahl
        type: 'custom:bignumber-card'
        style: |
          ha-card {
            background: rgba(0,0,0,0.0);
            border-radius: 15px;
            height: 146px
          }        
    type: horizontal-stack

Beside that, does someone have an idea to have two widget look like one, without a gap in the middle?
Or have a picture with text beside the image in one widget as show above with the two right widgets?

6

You can place cards inside entities card. So you can add a horizontal stack as a row inside the entities card.

7

I always see YAML errors…

8

You need to find the correct name for the cards. Here’s a list of available entries:

You’ll need to use custom: before using any of these elements. example: custom:hui-horizontal-stack-card

rows

hui-climate-entity-row
hui-cover-entity-row
hui-group-entity-row
hui-input-datetime-entity-row
hui-input-number-entity-row
hui-input-select-entity-row
hui-input-text-entity-row
hui-lock-entity-row
hui-media-player-entity-row
hui-scene-entity-row
hui-script-entity-row
hui-sensor-entity-row
hui-text-entity-row
hui-timer-entity-row
hui-toggle-entity-row

cards

hui-alarm-panel-card
hui-conditional-card
hui-empty-state-card
hui-entities-card
hui-entity-button-card
hui-entity-filter-card
hui-error-card
hui-gauge-card
hui-glance-card
hui-history-graph-card
hui-horizontal-stack-card
hui-iframe-card
hui-legacy-wrapper-card
hui-light-card
hui-map-card
hui-markdown-card
hui-media-control-card
hui-picture-card
hui-picture-elements-card
hui-picture-entity-card
hui-picture-glance-card
hui-plant-status-card
hui-sensor-card
hui-shopping-list-card
hui-stack-card
hui-thermostat-card
hui-vertical-stack-card
hui-weather-forecast-card

here’s an example entities card

type: entities
entities:
  - type: custom:hui-horizontal-stack-card
    cards:
      - type: button-card
        entity: light.light1
      - type: button-card
        entity: light.light2
2 Likes
9

Thanks again for your support. Got it to run, but the result looks similar to what I had before.

What I’m thinking about is something like:
image
An image with some text beside oder even better, two cards combined to look like one card.
The left on is a markdown and the right one a bignumber-card…

10

You’re going to have to play around with different cards to get what you desire. Chances are, no one has done what you’re looking to do. I suggest the custom:button-card as you can center things and move items around in the grid.

Take a look at my interface, it has all sorts of odd combinations to get desired looks.

1 Like