Why is the second line in a multi-line vertical stack of horizontal stacks overlapping?

Mastiff · August 24, 2024, 7:49pm

I am making a Lovelace page for my boat, to control the stereo (party with ESP32 relays, partly with ESP32 IR commands and partly with network commands). I am using a vertical stack as the main card and then six horizontal stacks inside of that. To make the card fill up the available screen real estate (this will be used with four different resolutions) I have set it to panel as the view type. But for some reason the second horizontal stack overlaps the first, while the rest do not. Can somebody please tell me why? This is what it looks like:

And the code:

views:
  - title: Home
    cards:
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: switch.styrehus1_pioneer_spiller
                show_state: true
                icon: mdi:audio-video
                name: Anlegg strøm
                icon_height: 50px
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: switch.styrehus1_forsterker_foran
                show_state: true
                icon: mdi:amplifier
                name: Forsterker foran
                icon_height: 50px
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: switch.styrehus1_forsterker_bak
                show_state: true
                icon: mdi:amplifier
                name: Forsterker bak
                icon_height: 50px
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: switch.styrehus1_forsterkere_i_subwoofere
                show_state: true
                icon: mdi:music-clef-bass
                name: Subwoofere
                icon_height: 50px
            title: Anleggstrøm
          - type: horizontal-stack
            cards:
              - show_name: false
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: button.styrehus1_ir_volum_ned
                show_state: false
                icon: mdi:volume-minus
                hold_action:
                  action: toggle
                icon_height: 75px
                name: Volum ned
              - show_name: false
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: button.styrehus1_ir_volum_opp
                show_state: false
                icon: mdi:volume-plus
                name: Volum opp
                icon_height: 75px
              - show_name: false
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: button.styrehus1_ir_mute
                show_state: false
                icon: mdi:volume-mute
                name: Mute
                icon_height: 75px
              - show_name: false
                show_icon: true
                type: button
                tap_action:
                  action: navigate
                  navigation_path: /lovelace-nettbrett/9
                show_state: false
                icon: mdi:equalizer
                name: Equalizer
                icon_height: 75px
          - type: horizontal-stack
            cards:
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: button.styrehus1_ga_til_aux
                show_state: false
                icon: mdi:music-box-multiple-outline
                name: JRMC
                icon_height: 40px
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: button.styrehus1_ga_til_dab
                show_state: false
                icon: mdi:radio
                name: DAB
                icon_height: 40px
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: button.styrehus1_ga_til_bluetooth
                show_state: false
                icon: mdi:bluetooth-audio
                name: Bluetooth
                icon_height: 40px
          - type: horizontal-stack
            cards:
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: navigate
                  navigation_path: /lovelace-nettbrett/jriver-media-center
                show_state: false
                icon: mdi:archive-music-outline
                name: Media Center-panel
                icon_height: 40px
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: call-service
                  service: mqtt.publish
                  target: {}
                  data:
                    topic: madmax/wallpanel/command
                    payload: >-
                      {"url":
                      "intent:#Intent;launchFlags=0x10000000;component=com.lenworthrose.eos/.activity.RootNavigationActivity;end"}
                hold_action:
                  action: none
                name: JRMC EOS
                icon: mdi:music
                icon_height: 40px
          - type: horizontal-stack
            cards:
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: button.styrehus1_ga_til_lagret_radiokanal_1_p1
                show_state: false
                icon: mdi:numeric-1
                name: NRK P1
                icon_height: 40px
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: button.styrehus1_ga_til_lagret_radiokanal_2_p2
                show_state: false
                icon: mdi:numeric-2
                name: NRK P2
                icon_height: 40px
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: button.styrehus1_ga_til_lagret_radiokanal_3_p3
                show_state: false
                icon: mdi:numeric-3
                name: NRK P3
                icon_height: 40px
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: button.styrehus1_ga_til_lagret_radiokanal_4_p4
                show_state: false
                icon: mdi:numeric-4
                name: P4
                icon_height: 40px
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: button.styrehus1_ga_til_lagret_radiokanal_6_alltid_nyheter
                show_state: false
                icon: mdi:newspaper-variant-multiple-outline
                name: Alltid Nyheter
                icon_height: 40px
          - type: horizontal-stack
            cards:
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: button.styrehus1_ga_til_lagret_radiokanal_8_p6_rock
                show_state: false
                icon: mdi:guitar-acoustic
                name: P6 Rock
                icon_height: 40px
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: button.styrehus1_ga_til_lagret_radiokanal_5_radio_rock
                show_state: false
                icon: mdi:guitar-electric
                name: Radio Rock
                icon_height: 40px
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: button.styrehus1_ga_til_lagret_radiokanal_7_p10_country
                show_state: false
                icon: mdi:cow
                name: P10 Country
                icon_height: 40px
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: >-
                  button.styrehus1_ir_sok_lang_press_pa_ikke_lagret_radiokanal_opp_meny_ok_enter
                show_state: false
                icon: mdi:radio-tower
                icon_height: 40px
                name: Kanalsøk opp
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: button.styrehus1_ir_lagret_radiokanal_menyvalg_ned
                show_state: false
                icon: mdi:minus-circle-outline
                name: Lagret kanal ned
                icon_height: 40px
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: button.styrehus1_ir_lagret_radiokanal_menyvalg_opp
                show_state: false
                icon: mdi:plus-circle-outline
                name: Lagret kanal opp
                icon_height: 40px
    type: panel

Ildar_Gabdullin · August 24, 2024, 8:53pm

one
two

mirekmal · August 25, 2024, 8:05am

Thats why I switched some time ago to custom:vertical-stack-in-card. Unlike the name implies, it has 2 modes, can serve also as horizontal stack. Since then I have no issues.

Mastiff · August 25, 2024, 9:41am

@Ildar_Gabdullin Aha… I added my comment to the last thread.

@mirekmal Thanks, I will try that!

Mastiff · August 25, 2024, 10:22am

That worked very well, except for one thing: I am not really sure how to use the CSS. Do you use that? I would like borders around the cards. At the moment I only have the icons on white. I tried with this:

type: custom:vertical-stack-in-card
cards:
  - type: custom:vertical-stack-in-card
    horizontal: true
    styles:
      {
      border-style: double;
      }

But that didn’t give me any borders either.

mirekmal · August 25, 2024, 10:58am

Try something like:

type: custom:vertical-stack-in-card
styles:
  border-style: solid
  border-width: 5px
  border-color: red
  border-radius: 15px

Card accept styles 'directly, without syntax required for card mod.

Mastiff · August 25, 2024, 11:14am

Thank you! That worked!

Ildar_Gabdullin · August 25, 2024, 11:16am

What you marked as a “solution” - is NOT a solution.
It could be merely a workaround.
Marking a post as a “solution” = pointing users to a right direction.
Real solution is solving bugs.

Mastiff · August 25, 2024, 11:17am

I have always understood it as “solution” means a solution to the question in the thread. And I solved it by using another card. So it is a solution for me. And I did put in my message in the Github thread, which speaks to the greater problem, not my particular problem today.

Mastiff · August 25, 2024, 11:51am

@mirekmal I am trying to get a bit of spacing between them. When I use this code:

type: custom:vertical-stack-in-card
cards:
  - type: custom:vertical-stack-in-card
    horizontal: true
    styles:
      margin-left: 2px
      margin-right: 2px
      border-style: solid
      border-color: black
      border-width: 2px
      border-radius: 10px

I get a nice spacing in each row. But I can’t get spacing between the rows. Adding margin or padding to the bottom or top of the rows of cards only make the cards taller, it doesn’t pull them apart. Can you please tell me how that is done?

mirekmal · August 25, 2024, 12:13pm

Hm… margins hould work. Here is example of plain card:

and same card with top and bottom margins added:

There is clear difference…

Mastiff · August 25, 2024, 1:33pm

I have a sneaking suspicion that it’s because you are using a vertical card there, while I am using horisontal cards in a vertical stack. So I think somehow I will probably have to move this so it goes for all the seven vertically stacked cards. What I’m doing now is only affecting inside each vertically stacked card. Here is with a margin of 122 for the top row of cards, it only elongates them.

And that’s the editor, looks like there is a pixel or so margin. In the actual view there is no margin top or bottom at all:

mirekmal · August 25, 2024, 2:07pm

OK, some tesst show following:

it does not work at all if styling applied at the top level stack card
it works fine if nesting vertical stacks inside horizontal stack (requires equal number of columns across all rows, that is not the case of your config)
it does not work if nesting horizontal stacks inside vertical stack (what you do), in such scenario indeed instead of adding margin outside of the card, it stretches card vertically.

So what can help is to explicitly specify card height instead of bottom margin. Here is sample code using horizontal stacks nested within vertical stack that works properly

type: custom:vertical-stack-in-card
horizontal: false
cards:
  - type: custom:vertical-stack-in-card
    horizontal: true
    styles:
      margin-left: 2px
      margin-right: 2px
      border-style: solid
      border-color: red
      border-width: 2px
      border-radius: 10px
      margin-top: 20px
      height: 75px
    cards:
      - entities:
          - entity: binary_sensor.basement_motion_sensor
        type: entities
      - entities:
          - entity: light.basement_main
            toggle: true
            type: custom:slider-entity-row
        show_header_toggle: false
        type: entities
  - type: custom:vertical-stack-in-card
    horizontal: true
    styles:
      margin-left: 2px
      margin-right: 2px
      border-style: solid
      border-color: red
      border-width: 2px
      border-radius: 10px
      margin-top: 20px
      height: 75px
      margin-bottom: 20px
    cards:
      - entities:
          - entity: binary_sensor.basement_motion_sensor
        type: entities
      - entities:
          - entity: light.basement_main
            toggle: true
            type: custom:slider-entity-row
        show_header_toggle: false
        type: entities

Please note additional margin-bottom property added to create additiona bottom space below bottom row.
and here is output of this config:
Screenshot 2024-08-25 at 16.04.20

Mastiff · August 25, 2024, 2:16pm

Thank you again! That does indeed work!

Mastiff · August 25, 2024, 2:35pm

@mirekmal I was considering adding titles to a few of the lines, but the title takes up as much space in height as the icons. Is that possible to change?

Ildar_Gabdullin · August 25, 2024, 2:59pm

Using a custom card just to prevent a glitch may not be a proper way - you are solving some issues & adding new ones. Consider using card-mod to find out a reason of this glitch - and then fix it - while using same stock cards.

mirekmal · August 25, 2024, 3:37pm

Not sure, to be honest, I do not use tile card at all…
I tried to propose something with markdown card, that seems to be minimalistic and reasonable choice for just a header, but apparently it also has some predefined margins vs. text it displays, so not easy to shrink it vertically. But lets try, perhaps will be a bit better:

type: markdown
content: |
  Volum
card_mod:
  style: |
    ha-card {
      background: none;
      font-size: 40px;
    }

Mastiff · August 25, 2024, 4:19pm

It doesn’t seem to obey any CSS, I’m afraid. Not the font size or min or max height or border or anything. It may be because it’s in a custom stack card. But I can live without that line.

Hang on, found it! I needed to add !important at the end of the lines for size!

And it’s exactly as I wanted it! Again thanks a lot!