Bubble-Card
Bubble-Card copied to clipboard
Separator - Line length and spacing
Describe the bug
The separator line doesn't end with the right spacing when sub buttons are added.
The space gets longer with each sub-buttons added
The two purple line are the same length and are there to illustrate the uneven spacing.
Also the space after the text and before the subbutton is a bit longer to my taste, is there a styling option to change it ?
Subsidiary question: (can make another issue) why "normal" card layout doesn't reduce the height of the cell used by each bubble card ? Is it a fixed minimal height linked to the LoveLace frontend ? If there is a another card type above the separaror, it results in an unven vertical spacing. Could the Bubble Card be vertically centered in each cell (with styling ?) ?
Thank you for your great work !
Expected behavior
The divider should be closer to the sub-buttons
YAML
If applicable, add any relevant YAML code.
- type: sections
max_columns: 2
sections:
- type: grid
cards:
- type: custom:bubble-card
card_type: separator
name: Test 1
sub_button:
- icon: mdi:numeric-1
styles: |2-
.bubble-line {
background: red ;
opacity: 1;
}
.bubble-sub-button-1 {
background-color: grey !important;
}
.bubble-sub-button-2 {
background-color: grey !important;
}
.bubble-sub-button-3 {
background-color: grey !important;
}
- type: custom:bubble-card
card_type: separator
name: Test 2
sub_button:
- icon: mdi:numeric-1
- icon: mdi:numeric-2
styles: |2-
.bubble-line {
background: red ;
opacity: 1;
}
.bubble-sub-button-1 {
background-color: grey !important;
}
.bubble-sub-button-2 {
background-color: grey !important;
}
.bubble-sub-button-3 {
background-color: grey !important;
}
- type: custom:bubble-card
card_type: separator
name: Test 3
sub_button:
- icon: mdi:numeric-1
- icon: mdi:numeric-2
- icon: mdi:numeric-3
styles: |2-
.bubble-line {
background: red ;
opacity: 1;
}
.bubble-sub-button-1 {
background-color: grey !important;
}
.bubble-sub-button-2 {
background-color: grey !important;
}
.bubble-sub-button-3 {
background-color: grey !important;
}
Informations (please complete the following information):
- Browser/App: Firefox
- Bubble Card version: 2.0.4
- Home Assistant version: 2024.6.4