Modify lovelace view padding

Configuration Frontend
1

I’m trying to get a better experience on mobile with some extra space around the lovelace view. I cant seem to find anything that works and I can’t even modify vertical-cards to hold some overall left/right padding.

Currently if you have a phone that has waterfall screens or super slim bezels, the cards almost disappear along the edges.

Any tip where I can start to modify things?

2

Sounds like a job for:

3

Well, that was my initial thought. But not really, since it can’t support styling for views or vertical/horizontal stack cards. That means it’s something I have to either add to individual cards or I need to do some hacking to view cards in cards (like what you normally do with stacking cards).

So I want a more robust solution or if there is something I’m missing here :slight_smile:

4

You can use entity cards instead of vertical stack cards.

5

What @tom_l said, or from card-mod docs:

Mod-card

There are some cards where card-mod just won’t work. Those cards often are not really cards at all, but change how other cards work. Examples include: conditional , entity-filter , horizontal-stack and vertical-stack as well as some custom cards, like layout-card , auto-entities and state-switch among others.

For those cases, a special mod-card is provided as a workaround:

1 Like
6

Haha…thanks guys, I should read more closely next time. This was exactly what I needed!
But you have to admit mod-card /card-mod is confusingly similar in the wording :slight_smile:

1 Like
7

Some updates: This was 99% right. It works on the web. and in a PWA on android and for the iPhone app. The only minus is the Android App where I get a big fat error on the page (Cannot assign to read only property “style” of Object '# ) So close…

But I think I need to give that feedback to the app developers for androids :slight_smile:

8

An update if you happen to be in the same situation. A little extra space was in the yaml file and that made it work on desktop but not on android. When it was removed it worked flawless :slight_smile:

9

Can you share your config? Did you wrap everything in a special card? I don’t want to alter my card structure just for the padding…

10

Sure, I have split up all lovelace views in their own files but for one view it looks something like this (this is my weather view, there are of course a lot more theme and buttons). The padding is added at the top with padding: 8px 12px 38px 12px:

title: Weather
id: cl01
path: climate
icon: mdi:weather-partly-cloudy
background: '#3C3C3C'
cards:

  - type: custom:mod-card
    style: |
      ha-card {
        padding: 8px 12px 38px 12px;
      }
    card:

      type: vertical-stack
      cards:

      - type: custom:decluttering-card
        template: title_template_nonav
        variables:
          - title: Väder & vind
          - topspace: 0px
          - bottomspace: 0px
          - path: /lovelace/level01

      - type: entities
        show_header_toggle: false
        entities:
          - sensor.ute_temperature
          - sensor.nere_temperature
          - sensor.gameroom_temperature
          - sensor.livingroom_temperature

      - type: weather-forecast
        entity: weather.smhi_malmo

        style: |
          ha-card {
            color: black;
            border-radius: 5px;
            margin:  8px -2px 8px -2px;
            background: #FFFFFF;
            }
          }
1 Like