Align Sub buttons of several button cards

[HyperCriSiS]

Goal

Hi,
I want to align the sub buttons and wonder if there is a solution that does not need to move every sub-button individually per px.

Source Yaml

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#pihole"
    name: Pi-hole
    icon: mdi:pi-hole
    width_desktop: 600px
    show_state: false
    button_type: state
    entity: binary_sensor.pi_hole_status
    show_attribute: false
    attribute: friendly_name
    sub_button:
      - entity: binary_sensor.pi_hole_status
        state_background: false
        show_name: false
        show_state: true
        show_attribute: false
        tap_action:
          action: call-service
          target: {}
          service: pi_hole.disable
      - entity: binary_sensor.pi_hole_status
        state_background: false
        icon: mdi:timer-10
        name: aus
        show_name: true
        tap_action:
          action: perform-action
          perform_action: pi_hole.disable
          target: {}
          data:
            duration: 10s
    show_name: true
  - type: custom:bubble-card
    card_type: button
    button_type: state
    name: DNS Blockierung
    icon: mdi:shield-check
    entity: switch.pi_hole
    show_state: true
    show_name: true
    styles: |-
      .bubble-sub-button-container {
        padding-right: 40px !important;
      }
    sub_button:
      - entity: sensor.pi_hole_werbungen_heute_blockiert
        name: Blockiert
        show_state: true
        show_icon: true
        icon: mdi:block-helper
        show_name: false
        state_background: false
      - entity: sensor.pi_hole_werbungsanteil_heute_blockiert
        name: Blockrate
        show_state: true
        show_icon: true
        icon: mdi:percent
        state_background: false
    card_layout: large-2-rows
  - type: custom:bubble-card
    card_type: button
    button_type: state
    name: DNS Anfragen
    icon: mdi:dns
    entity: sensor.pi_hole_dns_abfragen_heute
    show_state: true
    show_name: true
    sub_button:
      - entity: sensor.pi_hole_dns_abfragen_weitergeleitet
        name: Weitergeleitet
        show_state: true
        show_icon: true
        icon: mdi:arrow-right
        state_background: false
      - entity: sensor.pi_hole_dns_abfragen_zwischengespeichert
        name: Cache
        show_state: true
        show_icon: true
        icon: mdi:database
        state_background: false
    styles: |-
      .bubble-sub-button-container {
        padding-right: 40px !important;
      }
    card_layout: large-2-rows
  - type: custom:bubble-card
    card_type: button
    button_type: state
    name: Clients
    icon: mdi:account-group
    entity: sensor.pi_hole_eindeutige_dns_clients
    show_state: true
    show_name: true
    sub_button:
      - entity: sensor.pi_hole_eindeutige_dns_domains
        name: Domains
        show_state: true
        show_icon: true
        icon: mdi:web
        show_name: false
        state_background: false
      - entity: sensor.pi_hole_blockierte_domains
        name: Blockliste
        show_state: true
        show_icon: true
        icon: mdi:playlist-remove
        state_background: false
        show_name: false
    card_layout: large-2-rows
    styles: |-
      .bubble-sub-button-container {
        padding-right: 40px !important;
      }

Which step did you already try?

This one moves the sub buttons but seems dependent on the name of the container.

.bubble-sub-button-container {
        padding-right: 40px !important;
 }


This also works, but then I have to manually figure out px per px until it fits.
Also if you have a changing value in the container, like I have in one card with the weather, it moves the buttons when the text of the container changes.

.bubble-sub-button-1 {
    transform: translate(-20px) !important; /* Verschiebt den ersten Sub-Button */
  }
.bubble-sub-button-2 {
    transform: translate(-20px) !important; /* Verschiebt den zweiten Sub-Button */
  }

Problem

The problem is always that I have to manually move every single sub-button.
Also if I have moved them with to a certain position, they are still dependent from the name of the container and move around when the value changes.
Is it somehow possible to place all sub buttons at specific px measured from left side of the card?

How can I solve this?

Thanks and regards
Hyper

Read the documentation

• I have read the documentation

[Menelao147]

With this modification, applied to each Bubble Card, you align all the sub-buttons.

.bubble-sub-button-container{
  position: absolute;
  right: anchor(left);
  margin-left: 250px;
}

---

_{If this solves your problem, mark this as solved and close the discussion.}

[HyperCriSiS]

Thank you SOO much!! This was driving me nuts.
Did not find a solution for so many hours. Was torturing ChatGPT and Claude but they were not able to solve this -.-

[HyperCriSiS]

On a card with more then 2 sub buttons. How can I additionally control the space between 1,2 and 3,4 while having the overall fixed position from left?

[Menelao147]

Unfortunately, you'll have to apply the style to all subsequent SubButtons after the second one.

.bubble-sub-button-container{
  position: absolute;
  right: anchor(left);
  margin-left: 150px;
}

.bubble-sub-button-3{
  position: absolute;
  top: anchor(top, 0px);
  right: anchor(left);
  margin-left: 180px;
{

---

_{If this solves your problem, mark this as solved and close the discussion.}

[HyperCriSiS]

Hi,
thanks again ur looking into this!
Unfortunatley the CSS style for the sub-3 and 4 does not work properly, it gives me a very strange behavior.

Before:

Somehow during the style testing the Temperature got lost. It can show every other attribute, except the temperature.
I did not change anything there so this hopefully fixes itself 🤷‍♂️

After:

Sub-4 is moved then were Sub-3 should be.
When I add a config for Sub-4 it has no effect.
I played around with values and top and bottom configs but it keeps the way that somehow Sub-4 moves to the place of Sub-3 and Sub-3 can't be configured properly.

Do you have another idea?

[Menelao147]

Sorry, I made a mistake in my last code.
This should work fine:

.bubble-sub-button-container{
  position: absolute;
  right: anchor(left);
  margin-left: 150px;
}

.bubble-sub-button-3{
  position: absolute;
  top: anchor(top, 0px);
  right: anchor(left);
  margin-left: 180px;
}

.bubble-sub-button-4{
  position: absolute;
  bottom: anchor(bottom, 0px);
  right: anchor(left);
  margin-left: 180px;
}

[HyperCriSiS]

Best man 👍 Thank you so much. This CSS styling kills me 😅