Lovelace entities - reduce space between elements

Hi,
I’m looking for a way to reduce the vertical spaces between elements on an entities card, to get a more compact feeling. Something like the following:

views:
  - cards:
      - type: entities
        entities:
          - entity: sensor.pv_prod
          - entity: sensor.pv_self_consumed
        show_header_toggle: false
        style:
          font-size: 9px
          padding: 0px
          padding-bottom: 0px

I saw the thread Lovelace - Space between enteties? where they were trying to add additional spaces between elements - which is the opposite from what I want.

What I found too on home-assistant.io/lovelace/ are hints about themes, but nothing more.
Any ideas are highly appreciated!
Best

2 Likes

I used a picture-elements card to accomplish this. My picture is a very small transparent image, in other words no image. I have 48 elements being displayed in a small area on the screen. Adjust the spacing with the top parameter. Here’s how I started it. Hope that helps

          card:
            type: picture-elements
            image: /local/icons/transparent.png
            show_header_toggle: false
            elements:
              - type: state-label
                entity: input_text.room
                style:
                  top: 11%
                  left: 20%
                  font-size: 140%
                  font-weight: bold
              - type: state-label
                entity: input_text.lr
                style:
                  top: 20%
                  left: '20px'
                  font-size: 100%
1 Like

I use card-modder for this. Not sure how this works with multiple entities in a single card though.

- type: custom:card-modder
  style:
    padding-top: 0px
    padding-bottom: 0px
  card:
    type: entities
    entities:
    - input_select.living_room_state
2 Likes

Can we see a screenshot of what it looks like? :slight_smile:

I had no luck with the card-modder so far, tried a couple of hours.
I didn’t try the picture-elements card yet.

sure, Room Status is the picture element card

3 Likes

also using card-mod but with the following style:

      style:
        .: |
          #states > * {
              margin: -1px 0px !important;
          }

you can play with the -1px up or down until you get the look you want (by default, in lovelace, this value is 8px)

example with default:


with -1px margin:

3 Likes

My solution is to use multiple-entity-row, in a way it was not intended I expect ! :

entities:
  - entity: sensor.your1
    icon: nothing
    style: |
      state-badge {
        height: 17px;
      }
    type: 'custom:multiple-entity-row'
  - entity: sensor.your2
    icon: nothing
    style: |
      state-badge {
        height: 17px;
      }
    type: 'custom:multiple-entity-row'
type: entities

The key is you need to hide the icon as it gets cut-off as you shrink the row height.

Can you show me what it ended up looking like. I have done a bunch of stuff with this merging multiples cards across each other to form this below. Be interested what you have come up with.

narrowlines

My smallest card showing the spacing.

Can you share your config to show how you did this? The solution from @jvaillant doesn’t work for me…

Sorry, did not see your question:

group.kitchen_lights:
  title: "Kitchen Lights"
  card:
    type: entities
    show_header_toggle: false
    style:
      .: |
        #states > * {
            margin: -1px 0px !important;
        }

        ha-card {
          box-shadow: none;
        }
    entities:
      - type: custom:slider-entity-row
        entity: light.kitchen_ceiling_lights
        name: Ceiling
        toggle: true
        hide_when_off: true
      - type: custom:slider-entity-row
        entity: light.kitchen_island_lights
        name: Island
        toggle: true
        hide_when_off: true
      - type: custom:slider-entity-row
        entity: light.kitchen_counter_lights
        toggle: true
        hide_when_off: true
        name: Counter
      - type: custom:slider-entity-row
        entity: light.kitchen_sink_lights
        name: Sink
        toggle: true
        hide_when_off: true
      - type: custom:slider-entity-row
        entity: light.kitchen_nook_chandelier
        toggle: true
        hide_when_off: true
        name: Chandelier

but I also have mod-card in my configuration.yaml

lovelace:
  mode: yaml
  resources:
    - url: /hacsfiles/lovelace-card-mod/card-mod.js
      type: module

hope this helps…

5 Likes

That’s ok. Im gonna try it out. Thanks for sharing.

Edit: Works like a charm. Probably put it in the wrong place the first time. Thank!