Custom bubble-card Vertikal

[pascal_bcn]

Guten Abend zusammen,

ich stehe nun vor der nächsten Herausforderung. Ich habe mir die nachfolgende custom:bubble-card erstellt und würde sie gern vertikal statt horizontal haben.

Hat jemand ne Idee wie ich das realisieren kann oder gar ein Code Snippet für mich?

Ich bedanke mich schon einmal im Voraus bei euch!

Lieben Gruß,
Pascal

type: custom:bubble-card
card_type: button
card_layout: large
button_type: name
show_icon: false
show_name: false
sub_button:
  - name: Home
    icon: mdi:home
    tap_action:
      action: navigate
      service: input_boolean.toggle
      navigation_path: /dashboard-dev/zuhause
    show_state: false
    show_name: false
    show_last_changed: false
    show_attribute: false
    show_background: false
  - name: Wohnzimmer
    show_background: false
    tap_action:
      action: navigate
      navigation_path: /dashboard-dev/wohnzimmer
    show_icon: true
    show_state: false
    icon: mdi:sofa-outline
  - name: Küche
    icon: mdi:countertop-outline
    show_background: false
    tap_action:
      action: navigate
      navigation_path: /dashboard-dev/kuche
  - name: Schlafzimmer
    icon: mdi:bed-king-outline
    show_background: false
    tap_action:
      action: navigate
      navigation_path: /dashboard-dev/schlafzimmer
  - tap_action:
      action: navigate
      navigation_path: /dashboard-dev/badezimmer
    name: Badezimmer
    icon: mdi:bathtub-outline
    show_background: false
  - name: Szenen
    icon: mdi:theater
    show_background: false
    tap_action:
      action: navigate
      navigation_path: /dashboard-dev/szenen
  - name: Settings
    icon: mdi:cog
    show_background: true
    tap_action:
      action: navigate
      navigation_path: /dashboard-dev/einstellungen
    hold_action:
      action: navigate
      navigation_path: /dashboard-dev/infos
styles: |
  .card-content {
    width: 100%;
    margin: 0 !important;
  }
  .bubble-button-card-container {
    background: none;
  }
  .bubble-sub-button {
    height: 55px !important;
    width: 55px !important;
  }
  .bubble-sub-button-container {
    width: 100%;
    justify-content: space-between !important;
  }
  .bubble-sub-button-icon {
    --mdc-icon-size: inherit !important;
  }
  .bubble-name-container {
    margin-right: 0px !important;
  }
scrolling_effect: true

[Thobi]

Wie in der Dokumentation beschrieben musst du deinen Code in einen Vertikal Stack einbinden.

[pascal_bcn]

Das habe ich schon erfolglos probiert. Ich möchte die Buttons einzeln untereinander mittig angeordnet haben. Ich habe die Buttons jetzt alle einzeln angelegt und den space angepasst, das schaut dann aber je nach Gerät gut aus und ist Mittig und auch einem anderen passt es absolut nicht.

 }
  .bubble-name-container {
    margin-right: 180px !important;
  }

Quasi das es so ausschaut:

[Thobi]

Schau dir doch mal diese Lösung an.

type: custom:bubble-card
card_type: button
sub_button:
  - name: Home
    icon: mdi:home
    tap_action:
      action: navigate
      service: input_boolean.toggle
      navigation_path: /dashboard-dev/zuhause
    show_state: false
    show_name: false
    show_last_changed: false
    show_attribute: false
    show_background: false
  - name: Wohnzimmer
    show_background: false
    tap_action:
      action: navigate
      navigation_path: /dashboard-dev/wohnzimmer
    show_icon: true
    show_state: false
    icon: mdi:sofa-outline
  - name: Küche
    icon: mdi:countertop-outline
    show_background: false
    tap_action:
      action: navigate
      navigation_path: /dashboard-dev/kuche
  - name: Schlafzimmer
    icon: mdi:bed-king-outline
    show_background: false
    tap_action:
      action: navigate
      navigation_path: /dashboard-dev/schlafzimmer
  - tap_action:
      action: navigate
      navigation_path: /dashboard-dev/badezimmer
    name: Badezimmer
    icon: mdi:bathtub-outline
    show_background: false
  - name: Szenen
    icon: mdi:theater
    show_background: false
    tap_action:
      action: navigate
      navigation_path: /dashboard-dev/szenen
  - name: Settings
    icon: mdi:cog
    show_background: true
    tap_action:
      action: navigate
      navigation_path: /dashboard-dev/einstellungen
    hold_action:
      action: navigate
      navigation_path: /dashboard-dev/infos
tap_action:
  action: toggle
double_tap_action:
  action: more-info
name: Salon
show_last_changed: true
styles: |+
  .bubble-button-card-container {
    border-radius: 20px !important;
    margin-left: 10px !important;
    background: rgba(0,190,240,0.4);
  }


  .bubble-icon {
    opacity: 1;
    color: white !important;
  }

  .large .bubble-button-card-container {
    height: 320px;
  }
  .rows-2 .bubble-sub-button-container {
    flex-direction: column1;
    gap: 14px !important;
    display: grid !important;
    grid-template-columns: repeat(1, min-content);
    grid-template-rows: repeat(7, 1fr);
    grid-auto-flow: column;
    width: auto;
    padding-right: 1px;
    align-items: center;  
    justify-items: center;
  }

  .rows-2 .bubble-sub-button {
    height: 35px !important;
  }


card_layout: large-2-rows
icon: mdi:sofa
show_state: true
scrolling_effect: true
button_type: name
show_icon: false
show_name: false

[pascal_bcn]

Hi Thobi,

die Lösung von dir hat mir leider nicht so recht geholfen. Ich habe nun einen anderen Weg gefunden.