[Styling Module] Sub-buttons below

[MrBearPresident]

Sub-buttons below

Version: v2025.02.0
Creator: MrBearPresident

Important

Unsupported cards:

• Horizontal buttons stack
• Pop-up
• Empty Column

This module adds all the necessary css to move the subbuttons below and make full use of the witdh. In meantime give the main feature and title the room to use that witdh. Only applicable when multirow sections are used.
Configure this module via the editor or in YAML, for example:

type: custom:bubble-card
card_type: button
modules:
  - subbutton_below
card_layout: large
grid_options:
  rows: 3
sub_button:
  - entity: sun.sun
    icon: mdi:numeric-0
  - entity: sun.sun
    icon: mdi:numeric-1
  - entity: sun.sun
    icon: mdi:numeric-2
  - entity: sun.sun
    icon: mdi:numeric-3
button_type: state
entity: sun.sun

---

🧩 Get this Module

To use this module, simply copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

subbutton_below:
    name: Sub-button below
    version: "v2025.04.0"
    creator: "MrBearPresident"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1291"
    description: This module adds all the necessary css to move the subbuttons below and make full use of the witdh. In meantime give the main feature and title the room to use that witdh. Only applicable when multirow sections are used. 
    unsupported:
      - horizontal-buttons-stack
      - pop-up
      - empty-column
    code: |
          :host{
            --row-size-copy: var(--row-size,1);
          }

          .large .bubble-wrapper {
            display: grid;
            grid-template-areas:
            'i n a' 'b b b' !important;
            grid-template-columns: auto 1fr auto;
            grid-template-rows: var(--row-height,56px) 1fr;
            justify-self: start;
            justify-items: start;
            align-self: center;
            align-items: center;
            width: 100%;
            gap: 0px;
          }
          .large .bubble-content-container {
            justify-content: flex-start;
            grid-area: n;
            overflow: hidden;
            max-width: calc(100% - 2 * var(--gap-to-edge,7px));
          }
          .large .bubble-sub-button-container {
            --row-size: calc( var(--row-size-copy) - 1);
            max-width: calc(100% - 20px);
            max-height: calc(100% - 20px);
            grid-area: b;
            justify-self: center;
            align-self: center;
            justify-content: center;
            align-content: start;
            justify-items: center;
            margin: 0;
            left: 0;
            right: 0;
          }
          .large .bubble-buttons-container{
            grid-area: a;
          }

---

Screenshot:

[MrBearPresident]

@HyperCriSiS & @ddkedr: Here you go.

[HyperCriSiS]

Would it also be possible to additionally still use the first line? 😅
Especially for the the normal slider card, to really get use of the whole space.
Makes much difference on mobile view.

[MrBearPresident]

not easily....
I use the css grid to easily separate the items and give them a position.
So in short the card is build like this:

To use also the top would mean a grid design like this:

But this is not possible.

So that would mean in a redesign of this module and for the sub-buttons as well.
Because these are also ordered in grid structure.

[HyperCriSiS]

Thank you for the explanation!
Regarding the button and slider card, I thought they have no card specific feature area or is the card specific are normally the sub-button area? Without the module...

[MrBearPresident]

Indeed, the button and slider don't have a card-specific feature so that space would be empty but because the width of that space is defined on auto it goes to '0' when there is nothing in it.

[HyperCriSiS]

OK thanks 👍 maybe it can be realised in a future version

[ddkedr]

@MrBearPresident thanks a ton, man! That's exactly what I was looking for.

Just to clarity, am I correct that there is no easy way to put a state in a separate grid-area?
I'm thinking about experimenting with this layout:

ICON | NAME | STATE | ACTION
-----------------------------
SUB-BUTTONS

I feel that with this layout we'll use the empty space between name/state and feature action more effectively.
Of course this will only make sense for longer buttons that use 100% of screen width. For half-width cards your current layout with state under the name is more effective.
What do you think?

[HenryJIII]

Is it possible to adjust the container height of the sub-buttons, so those would be bigger? I feel like there is some unsused space between the name/state and the sub-buttons, that could be filled by making the sub-buttons bigger. Both in large and large with 2 rows mode.

[HyperCriSiS]

Also it would be cool if it could be used with normal layout instead of large.

[Clooos]

I have maybe something else in mind, but I always put usability first (and I hope everything is clear), that's why everything is editable in the editor.

For your drag and drop idea, what use case do you have in mind?

[HyperCriSiS]

I have no idea if this is even possible with a card addon or would have need a change in HA.
My idea is that there is no specific layout, only templates.
You create a raster card, with a certain size and x.y rasters.
Then you have an item editor where you can select from different buttons, style elements or whatever and you drop them into the raster and configure them there.
Or you just create placeholders directly in the raster, when you click on them a menu opens where you can select what it should be.
You could define virtual areas within the raster. Drop custom JS code onto it. Apply custom CSS Styles. Or you can add some kind of module, like you have it now. People could create whole Dashboard templates. You could realize automatic resizing to different screen sizes.

Also maybe as plugin system. I like software with plugins very much. It is an elegant way to keep things modular and exchangeable, easily extendible, and accessible. Anyone can contribute without the need of pull requests. I even would only make the real core functions non plugin.
That makes it much easier to adapt to whatever comes.
You exchange the plugin, bam, done.

Of course that would need a PC or at least a tablet for proper configuration experience, but it is not much different now.
Configuring HA on mobile phone is a pain in the ass.

Sure, this would be a mammoth project in the beginning, but I could imagine that in the long run it is better.

This was just a quick'n dirty brainstorm. 😅

[Clooos]

That's a lot more complex explained like that 🫠

[HyperCriSiS]

@Clooos
Do you think you can make it possible to use full space with sub-buttons?
To span them from first line over second below the main icon?
This would be interesting especially for section view on mobile to have no space left as blank unused space.

[Clooos]

This will come at some point 🙂 This is probably already possible with some custom styles.

[Clooos]

I updated his module to fully support v3.0.0. He wanted to update it himself, but I have no news from him anymore. I hope he's doing well.

I will not update everyone's modules (🫠), I just used his module as a test when I worked on the new structure, and updated it in the meantime.

[a-bianucci]

Where do you update the module at? Checking, depsite having bubble-card installed, I'm not seeing a www/bubble that contains the file mentioned

[Clooos]

Hi! The module feature is from v3.0.0-beta, this version is really stable and should be the last beta, I'm just waiting a bit before the stable release just to be sure 🙂

[Christinxa]

Hi, on desktop the card looks great, but in the Android app everything is shifted up (main icon, title, sub-buttons get cut off). Any ideas why?
Using bubble card beta v3.0.0-beta.5, btw. Thanks! 😊
Desktop: Mobile:

Edit: Seems to be related to Android WebView? Switching to Canary 138.0.7164.0 fixed it, but reverting to the stable version brings the issue right back.

[Christinxa]

Hi, on desktop the card looks great, but in the Android app everything is shifted up (main icon, title, sub-buttons get cut off). Any ideas why? Using bubble card beta v3.0.0-beta.5, btw. Thanks! 😊 Desktop: Mobile:

Edit: Seems to be related to Android WebView? Switching to Canary 138.0.7164.0 fixed it, but reverting to the stable version brings the issue right back.

Okay, the problem's back again with Android 15, even though I'm using the latest Android System WebView. It only occurs with this specific module.

[AlkaDragos]

Hi, i have the same problem 😞 and, yes, it's specific to this module as others works just fine. As suggested, i updated my WebView app to Canary, fixed it for 2 days, now it's back to be broken. I think it's something related to grid view, but i can't find any recent changes that may break this code. I'd like to know the potential solution too as i would like to use this 😃

[einfall]

Hello,
I use the lastest beta.
How can i setup 2 or more rows?
THX

[Velo1901]

Is there a way to remove the icons inside the pictures?

[einfall]

disable icon? how you set the speaker in the right corner on top? which module?

[Velo1901]

Disable the icon also removed the image. The right speaker is the volume option of the media player settings.

[Velo1901]

disable icon? how you set the speaker in the right corner on top? which module?

I think you're right, but every time I clicked on 'Show Icon' it removed the picture also. But after I try again it removed the icon of the first button, but removing the second icon gives me the same problem of removing the picture.

[Velo1901]

It getting stranger. If I first choose the button and click on visibility and start with entitiestatus and delete the if then etc. Go back to icon and click on not to show icon it removes the icon. I use version 3 beta 5, maybe it's the beta or safari on my MacBook. Happy with the layout. Thanks Mr. BearPresident

[tclayson]

Hello! This is great, thank you so much.

I was wondering if there was any way to get the buttons to stretch to fill the width of the button at all? A bit like the Mushroom Media Player card works (see pic below).

I would be happy if all the buttons just stretched equally to fill the width. I can't figure it out myself!

Thanks!