[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.02.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-button-card, .large .bubble-climate, .large
          .bubble-select-card,  .large .bubble-separator, .large
          .bubble-cover-card-container{
            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-cover-card-container .bubble-header {
            display: contents;
          }
          .large .bubble-cover-card-container .bubble-buttons {
            display: flex;
            align-self: center;
            grid-area: a !important;
            right:0;
            padding: 0 18px 0 0;
          }
          .large .bubble-separator.separator-container{
            grid-template-columns: auto auto 1fr;
          }
          .large .bubble-media-player{
            display: grid;
            grid-template-areas:
            'i n a1 a2 a3 a4 a5' 'b b b b b b b' !important;
            grid-template-columns: auto 1fr auto auto auto auto auto;
            grid-template-rows: var(--row-height,56px) 1fr;
            justify-self: start;
            justify-items: start;
            align-self: center;
            align-items: center;
          }
          .large .bubble-climate .bubble-button-container{
            grid-area: a;
            display: contents !important;
          }
          .large .bubble-climate .bubble-temperature-container{
            grid-area: a;
            height: calc(var(--row-height,56px) - 20px);
            width: auto;
            justify-self: center;
            margin-right: var(--gap-to-edge,7px);
          }
          .large .bubble-select-card > .bubble-dropdown-container{
            grid-area: a;
            display: contents !important;
          }
          .large .bubble-select-card .bubble-dropdown-arrow{
            grid-area: a;
          }
          .large .bubble-media-player-container .bubble-power-button{
            grid-area: a1;
            margin: 0px 6px
          }
          .large .bubble-media-player-container .bubble-previous-button{
            grid-area: a2;
            margin: 0px 6px
          }
          .large .bubble-media-player-container .bubble-next-button{
            grid-area: a3;
            margin: 0px 6px
          }
          .large .bubble-media-player-container .bubble-volume-button{
            grid-area: a4;
            margin: 0px 6px
          }
          .large .bubble-line{
            grid-area: a;
            width: 100%
          }
          .large .bubble-media-player-container  .bubble-play-pause-button {
            display: flex;
            height: 42px;
            width: 42px;
            padding: 0;
            grid-area: a5;
            align-items: center;
            justify-content: center;
            margin: 7px 7px 7px 6px;
          }
          .large .bubble-media-player-container .bubble-button-container{
            grid-area: a1;
            display: contents;
          }
          .large .bubble-name-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-icon-container {
            grid-area: i;
          }

---

Screenshot:

Before posting your module

• I've replaced all lines starting with ->
• I've updated the unsupported cards above the description and under the unsupported property
• I've added a screenshot
• I've chosen a unique your_module_key
• I really enjoyed working on this module ❤️

[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.

[Quokka1979]

am I missing something, I'm running on beta 7

[HyperCriSiS]

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

[HyperCriSiS]

The drag and drop thing is an incredible idea, even if it would be probably incredibly difficult to put in place, also my current build has a smoother editor, but not smooth enough to my liking, so a feature like that could make it even worth 😅

Maybe one day, but you're right, everything is a bit too static, that's why I'm planning to work a lot more on some new layouts, but in the meantime with the new modules, it will be easy to add new layouts and to share them (damn I like this new possibility).

That is a general HA issue and also issues like that with many other projects.
The Devs have a kind of a tunnel view and very often absolutely no fucking idea what the fucking hell usability is. 😂
Did you see the latest additions to the tile card? At general very nice, BUT, so damn dumb integrated, that I could not believe my eyes.
They literally just made the majority of the new possibilities not work, because it seems they just wanted to do but did not even think a bit. 😑
And that's the general thing with HA. Much done here and there and yes they maybe have a kinda clear roadmap, but IMO they concentrate on the wrong things since long time.
Main issue with HA still is, that it is damn fucking complicated, as soon as you want something 0.1% away from the default, lol.

YAML is just a damn abomination. Whoever decided using this, did not think a bit. 😂

Ok, enough rant, for now 😂

Did you see the module that I have added? I am ready for an update soon, with colour gradient option.
I am so proud how awesome it got.

[HyperCriSiS]

And regarding drag+drop, I think this is the only true way.
There is no other possibility if you want to achieve top notch usability.

[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 🫠