Lovelace entities - reduce space between elements

nickma · May 7, 2019, 11:09am

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

cyn · May 7, 2019, 11:54am

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%

Gluwc · May 7, 2019, 12:11pm

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

LarsNorgaard · May 9, 2019, 6:32pm

Can we see a screenshot of what it looks like?

nickma · May 9, 2019, 6:40pm

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

cyn · May 9, 2019, 7:14pm

sure, Room Status is the picture element card

jvaillant · February 14, 2020, 8:00pm

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:

ianadd · May 4, 2020, 1:23am

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.

jimpower · May 4, 2020, 5:30am

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.

ianadd · May 4, 2020, 7:31am

narrowlines

My smallest card showing the spacing.

duncan86 · September 21, 2020, 3:24pm

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

jvaillant · December 19, 2020, 9:14pm

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…

duncan86 · December 19, 2020, 9:50pm

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!