Sensor card text cut of with old style layout

Configuration Frontend
1

When I use the sensor card with the new Sections layout, the text and the graph for the card are displayed over the top of each other, like so:

image
image671×179 8.22 KB

It’s Awesome!!

_

But when using the old Masonry style layout, the text gets chopped by the graph, like so:

image
image775×238 5.46 KB

It Sucks!

_

Even with the underlying yaml exactly the same:
(I know I don’t need card_mod: in the Sections layout)

name: Inside Temperature
graph: line
type: sensor
entity: sensor.thermocarry_2
detail: 2
grid_options:
  columns: 15
  rows: 1
card_mod:
  style: |
    ha-card {
      height: 140px !important; # Set a fixed height
    }

Anyone know how I can make the old Masonry style layout have the text over the top of the graph?

I’ve been trying to migrate all my layouts to the new format but I just can’t quite get the layout I like just yet, so some screens are keeping the old type: custom:grid-layout

2

Sorry, I am not getting, is this code with card-mod was used in Masonry which caused the clipped text? Or you get the clipping without card-mod?

3

I don’t use card_mod with the Sections layout and it works great, I do use card_mod with the Masonry layout and get the clipping. If I don’t use card_mod then I can’t control the height of the card in Masonry layout.

4

Changing a card’s height with card-mod may cause undesired effects in many cases. What is a reason of using card-mod in masonry, only to set a smaller height? Cannot test it right now, but I am afraid this card behave differently inside a section; to get same look in masonry you will probably need more styling with card-mod, not just setting a fixed height.

5

Also, a remark for other people, this is not an “old” type, this is a custom layout-card.

6

Thanks! Yeah, I only use card_mod to set the height accurately, no other reason. I made these layouts years ago! Do you know a better way to set the height in a Masonry layout?
I’ll look into card_mod again, it’s been a very long time!
Thanks mate!

7

It seems that it should be done differently for the Sensor card.
Sorry, cannot help right now, away from a PC, may be in a week or two will help. Meanwhile, you can ask in the main card-mod thread, may be someone will help.

1 Like
8

Feel free to ping me in a week

1 Like
9

Thanks man!

1 Like
10

Test this out for your Masonry layout

card_mod:
  style: |
    ha-card {
      height: 140px !important; 
        }
    .info{
      margin-bottom: -90px;
        }

image
image970×365 11.4 KB

1 Like
11

Interesting that this clipping happens in masonry… Some research is needed)

12

Sections applies a fixed footer and Masonry does not. That alters the card’s layout significantly.

class="with-fixed-footer type-entity"

Still playing with it

13

Good findout. Can these changes be simulated in masonry? Or it turns to be same margin-like way?

14

Yes if you apply a position:fixed or absolute to .footer {

15

@LiQuid_cOOled That is working at my end too! Thanks man! :partying_face:

1 Like
16

@Ildar_Gabdullin jump started my CSS education!

1 Like
17

THIS post should be marked as a solution then)
@Psyonic

18

Already did my man!
Thanks for all your help!

19

Actually, I meant a post with “position”. Playing with margins may not give same results on different clients. Of course, a subject to experiment. Cannot test myself unfortunately.

20

Oh cool, hope that helps :blush:

1 Like