Mit card-mod einzelne Zeilen einer Entitäten-Karte höher setzten? Zeilen haben nicht den gleichen Abstand

[3003]

Hi,

ich habe bei einer multiple-row-entity-card Schalter mit eingefügt und da sind die Zeilen mit Schalter etwas runter gerutscht:

Kann man einzelne Zeilen mit card-mod oder irgendwie anders “anheben” dass alle Zeilen wieder den gleichen Abstand haben? Ich habe leider nichts gefunden…

VG Max

PS: Vielleicht sollte ich noch erwähnen dass in der Karte schon mit card-mod “rumgepfuscht” wurde um den generellen Abstand der Zeilen zu verringern.

card_mod:
      style: |
        ha-card 
        .card-content div {
          margin-top: 0px !important;
          margin-bottom: 0px  !important;
          height: 35px;
        }
        .card-content {
          padding-top: 0px;
        }

[alexsaas]

Ich bin mir nicht sicher, ob es mit multiple-row-entity-card auch funktioniert, da in card mod unterschiedliche row-types angesprochen werden können. Bei mir konnte ich die Höhe der einzelnen Zeilen der entities-card wie folgt ändern. In jeder einzelnen Zeile (je Entität):

card_mod:
  style: |
    hui-generic-entity-row {
      height: 50px;
    }

Es gibt aber auch noch:

card_mod:
  style: |
    hui-generic-entity-row {
      line-height: 50px;
    }

Bei mir funktionierte ersteres. Ich habe den code hier her:

🔹 Card-mod - Add css styles to any lovelace card

Und hier findest du weitere Styling-Optionen zur multiple-entity-row:

🔹 Card-mod - Add css styles to any lovelace card

[3003]

@alexsaas Vielen Dank! Ich habe mir tatsächlich einen Wolf gesucht…
Habe es jetzt so hinbekommen:

    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            :host {
              height: 20px;

und das unter die jeweilige Entität setzen.
Sieht dann so aus:

  - entity: ******
    type: custom:multiple-entity-row
    name: ******
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            :host {
              height: 20px;
            state-badge {
              display: none;
            }
            .info {
              margin-left:0 !important;
            }

Der “state-bagde”- Teil entfernt die Icons vor der Entität und rutscht den Text ganz nach links, um ein bischen mehr Platz zu haben.

Übrigens ist hier eine recht umfangreiche Sammlung an hilfreichen card-mpd-links:

🔹 Card-mod - Add css styles to any lovelace card

Nochmals vielen Dank für die schnelle Hilfe!

[alexsaas]

Gerne, freut mich das du es hinbekommen hast.

[3003]

Jetzt habe ich ein anderes Problem damit, ich kam gerade heim und sehe auf dem Tablet dass die Icons die ich entfernt hatte, bei den 3 “hochgerückten” Zeilen wieder da sind… Aber NUR auf dem Tablet.

Ansicht über PC:

Und GLEICHES Dashboard auf dem Tablet:

Stimmt irgendwas mit dem Code nicht? Aber warum klappt es dann auf dem PC undnicht auf dem Tablet?

  - entity: ******
    type: custom:multiple-entity-row
    name: ******
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            :host {
              height: 20px;
            state-badge {
              display: none;
            }
            .info {
              margin-left:0 !important;
            }

[alexsaas]

Kann jetzt nur spekulieren, dass es ein Cache Problem sein könnte. Versuch mal entweder den Browsercache auf dem Tablet zu leeren, oder falls du dort drauf die Companion App nutzt, dich dort abzumelden und wieder anzumelden.

[3003]

Cache war es leider nicht, alles gelöscht, neu gestartet, Problem besteht weiterhin…

[alexsaas]

Das ist schon irgendwie komisch. Nutzt du auf dem PC und Tablet die gleichen Browser?

Was mir noch aufgefallen bzw. eingefallen ist:

Vielleicht hilft !important

state-badge {
  display: none !important;
}

Und hier müsste m. E. nach ein Leerzeichen vor die 0 und besser ein px danach:

.info {
  margin-left: 0px !important;
}

[3003]

Das hat leider auch nicht geholfen.
Am Pc mache ich das übern Browser, Firefox.
In der HA App auf dem Handy sind die Icons auch NICHT da.
Nur auf dem Tablet mit Fully Kiosk Browser werden sie immernoch angezeigt.

EDIT: Fehler gefunden. Eine Klammer hat gefehlt.

    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            :host {
              height: 20px;
            }  <-----------------------------!!!!!!!!!!!!!!!!!
            state-badge {
              display: none; !important;
            }
            .info {
              margin-left: 0px !important;
            }

Aber warum es beim normalen Browser ging und beim Fully Kiosk nicht verstehe ich trotzdem nicht…

Vielen Dank @alexsaas für die Vorschläge!!

[alexsaas]

Oh man, die fehlende Klammer habe völlig übersehen! Wald vor lauter Bäumen und so …

Du hast da bei none noch ein Semikolon zu viel.

Hauptsache es läuft!

[3003]

Ja mit dem Wald das kenn ich

Das Semikolon wird noch entfernt, vielen Dank!

[maikel]

Nabend zusammen, ich habe jetzt einiges versucht um die Zeilenabstände der einzelnen Karten zu verringern. Habe auch einige Codes von euch hier benutzt, in der Hoffnung das es damit vielleicht funktioniert, aber leider keinen Erfolg. Gibt es eine Möglichkeit diese irgendwie zu verkleiner?

Ich nutze die Layout Card mit der Grid Ansicht.