How to style distribution card

Configuration Frontend
1

Anyone already figured out how to style new distribution card? I want to increase height of the bar itself, so it matches height of other bar charts I have on my dashboard. I tried something like:

card_mod: 
  style: | 
    .bar { 
      height: 20px; 
    }

or

card_mod: 
  style: | 
    ha-card { 
      --bar-height: 20px; 
    }

Even tried some other AI generated variations, but nothing works… Please advise!

1 Like
2

Are you trying to adjust a height in Masonry layout? Also, have you tried with “important”?

3

Well, it is within grid layout, but vertically it should not be constrain, as grid height is set to auto. AAn yes, I tried !important and many more AI suggestions, but AI itself recognises that this is new card and it know nothing, so can only guess. Unfortunately I’m not good in CSS not in using developer tools in browser, so I got stuck…

4

F F F, do not even mention AI.
Will see what I can do.

Try:

type: distribution
entities:
  - entity: input_number.test_level_1
  - entity: input_number.test_level_1
  - entity: input_number.test_level_1
card_mod:
  style:
    ha-segmented-bar $: |
      .bar {height: 48px !important;}

image
image480×129 3.35 KB

For a similarity to a custom bar-card, the height must be 40px:

image
image485×178 5.48 KB

and also tune up a top padding & border-radius for the bar-card for a perfect alignment.

Here it is - border radius for the bar card:

card_mod:
  style: |
    ha-card {
      --bar-card-border-radius: var(--ha-bar-border-radius,var(--ha-border-radius-sm));
    }

and margin for the Distribution card:

card_mod:
  style:
    ha-segmented-bar $: |
      .bar {
        height: 40px !important;
        margin-top: 0 !important;
      }

image
image489×179 5.74 KB

1 Like
5

Works perfectly! Thanks a lot!

1 Like