Trying to remove the space for the icon in Entities card

Configuration Frontend
1

I have an entities card which overflows because of the space for the icon.
billede
The card looks like this:

type: entities
entities:
  - entity: input_text.matrix1_scrolling_text
    name: Tekst til skilt
    type: custom:text-input-row
  - entity: select.displaymode
    icon: none

I need to remove the space for the icon as well, so I tried adding

style: |
  state-badge { display: none; }

To the entity line, but that didn’t work, how do I target that specific state-badge?

2

Assuming you have Card-Mod installed, this should do the trick:

card_mod:
  style:
    hui-generic-entity-row $: |
      state-badge {
        display: none;
      }

See this post:

3 Likes
3

Works like a charm

1 Like
4

edit: Note: As can be seen in the following discussion, the variant I presented in the following is only better at first glance. It is not recommended to use these and instead do the styling per row as mentioned before.

I did not want to repeat the card_mod style for every entity and adapted the code above having a single declaration for the entities card. If you have sensor entities the solution would be like this:

type: entities
entities:
  - entity: sensor.heizung_mode_preset_friendly
    name: Betriebsart
  - entity: sensor.heizung_state_action_program_friendly
    name: Status
  - entity: sensor.heizung_current_hvac_action
    name: Aktuell
  - entity: sensor.heizung_current_state
    name: Modus
card_mod:
  style:
    '#states div':
      hui-sensor-entity-row $:
        hui-generic-entity-row $: |
          state-badge {
            display: none;
          }
          .info {
            margin-left:0 !important;
          }

For other entity row types it has to be changed respectively.

Bildschirmfoto 2023-12-03 um 13.28.15
Bildschirmfoto 2023-12-03 um 13.28.15896×298 10.6 KB

5

… and if you have together toggles, sliders, input boxes - then you have to list all types)))

6

Yes, but how is that a disadvantage? The previous solution was to add styles for every single row. My solution only requires the specification for each type of row - if you only have one, as in my example, it is much easier this way. In addition, I define everything in a block at the end and not in between in the card configuration.
If you have a better solution that works generically for every type, then let me know :slight_smile:

7

The longer DOM path you have - the less persistent & reliable your styles can be.
It is not about “how can I define a path to get to each type of row” - it is EASY with using “:first-child” etc.
So, I would suggest to use a per-row styling - it is less cumbersome with yaml-anchors, classes, decluttering-template etc - but it is more stable.

8

Hm ok, thank you very much for your explanation. I think this is “advanced programming” :slight_smile: At the moment, I’m already happy if it works at all. At best, I even understand why.

But after reading your post again, I now understand your point of view and agree with you. With my variant, there is a greater chance that it will stop working at some point due to changes in the DOM. I’ll keep that in mind in the future.

1 Like