Benötige Hilfe bei card_mod und yaml

Allgemein
1

Hallo zusammen,

Ich möchte den Abstand zwischen der Uhrzeit und den Stehlampem vergrößern (s.u.) , ich verstehe aber überhaupt nicht an welcher Stelle ich mein card-mod einfügen muss.

Wenn ich in den Entwicklertools den Abstand “gap” anpasse wird das Ergebnis auch entsprechend angezeigt, aber wohin ich mein card_mod in meinem Code auch einbaue es passiert nicht das gewünschte.

image
image1800×1173 311 KB

HIer mein yaml - ich hoffe mir erklärt jemand, wohin und warum ich mein card-mod mit “gap: 50px;“ einfügen muss.

views:
  - type: sections
    sections:
      - type: grid
        cards:
          - type: custom:mod-card
            card_mod:
              style:
                hui-horizontal-stack-card$: ''
                .: |
                  ha-card {
                    border: 4px solid rgb(3,169,244) !important;
                    padding:5px;
                    background-color: rgb(5,236,240);
                    gap: 20px
                  }
            card:
              type: vertical-stack
              cards:
                - type: horizontal-stack
                  cards:
                    - type: clock
            grid_options:
              columns: 10
              rows: auto
        column_span: 3
      - type: grid
        cards:
          - type: vertical-stack
            cards:
              - type: horizontal-stack
                cards:
                  - type: button
                    entity: light.s1_stehlampe
                  - type: button
                    entity: light.s1_stehlampe
            grid_options:
              columns: 10
              rows: auto
        column_span: 5
    max_columns: 5

Danke Alex

2

Hallo,

gap legt einen Abstand zwischen Spalten und Reihen fest, und das in einem CSS-grid-Layout… Ich sehe in ha-card kein CSS-grid, das kann also eigentlich so nicht funktionieren. gap müsste ignoriert werden.

Leider habe ich kein Card Mod, deswegen kann ich nur raten…

Mal ein Versuch nur mit margin?:

views:
  - type: sections
    sections:
      - type: grid
        cards:
          - type: custom:mod-card
            card_mod:
              style:
                hui-horizontal-stack-card$: ''
                .: |
                  ha-card {
                    border: 4px solid rgb(3,169,244) !important;
                    padding: 5px;
                    background-color: rgb(5,236,240);
                    margin-bottom: 20px;
                  }
            card:
              type: vertical-stack
              cards:
                - type: horizontal-stack
                  cards:
                    - type: clock
            grid_options:
              columns: 10
              rows: auto
        column_span: 3
      - type: grid
        cards:
          - type: vertical-stack
            cards:
              - type: horizontal-stack
                cards:
                  - type: button
                    entity: light.s1_stehlampe
                  - type: button
                    entity: light.s1_stehlampe
            grid_options:
              columns: 10
              rows: auto
        column_span: 5
    max_columns: 5
3

Hallo, vielen Dank für deine Antwort. mein ursprünglicher Wunsch war es ja, den Abstand zwischen den Reihen zu vergrößern.

Dein Vorschlag mit “margin-bottom” erfüllt optisch aber genau meine Vorstellung. Eventuell führt das aber später zu Darstellungsproblemen wenn ich den Hintergrund einfärbe, da ich ja die gesamte Box vergrößere. Ich möchste später die Rahmen zur optischen Trennung anders einfärben.

Deshalb möchte ich gerne noch mal meine Frage bezogen auf den Screenshot der Entwicklertools stellen.

Wie kann ich in der “class=content” den Wert für gap anpassen? Wenn ich nämlich in den Entwicklertools den Wert für gap ändere, ist die Darstellung genau nach meinem Gusto. Es muss auch nicht mit card_mod sein (das entspricht nur meinem bisher eingeschränkten Wissen)!

Grüße Alex

4

Schwierig, wenn man nicht richtig testen kann…

eventuell so?

Ich bin mir nicht sicher ob das geht wenn die Uhr und die Lampen in unterschiedlichen Stacks stecken… Die müssten ja eine gemeinsame class content haben.
Ich kann das mit den Entwicklerwerkzeugen leider auch nicht nachvollziehen… Ist content nicht eine class von root? Dann könntest du du statt .content auch #root versuchen.

views:
  - type: sections
    sections:
      - type: grid
        cards:
          - type: custom:mod-card
            card_mod:
              style:
                hui-vertical-stack$: |
                  .content {
                    gap: 20px !important;
                  }
                .: |
                  ha-card {
                    border: 4px solid rgb(3,169,244) !important;
                    padding: 5px;
                    background-color: rgb(5,236,240);
                  }
            card:
              type: vertical-stack
              cards:
                - type: clock
                - type: horizontal-stack
                  cards:
                    - type: button
                      entity: light.s1_stehlampe
                    - type: button
                      entity: light.s1_stehlampe
            grid_options:
              columns: 10
              rows: auto
        column_span: 3

Ansonsten müsste mal jemand ran, der auch card-mod hat…