How to: Create a ultra-compact Mushroom Select Card (hide title/icon) in Sections View

Share your Projects! Dashboards & Frontend
1

Hi everyone,

I wanted to share a very clean and minimalist solution for a challenge in the new Sections View. I wanted to use a Mushroom Select Card for my air conditioning modes, but completely hide the icon, title, and status info, leaving only the clean selection button row visible.

If you just hide the elements, the Sections grid usually leaves an annoying empty space at the bottom because it reserves space for 2 rows.

The breakthrough is a combination of one specific dashboard setting and just a few lines of UI eXtension (UIX) code.

The Golden Trick

Before adding the code, make sure to change the Section layout setting for this card to: “Fit card height to content” (Pas de hoogte van de kaart aan op basis van de inhoud) and set rows: auto. This tells the grid to shrink perfectly around the card.

The Code

type: custom:mushroom-select-card
entity: select.your_entity_here
layout: horizontal
primary_info: none
secondary_info: none
icon_type: none
grid_options:
  columns: full
  rows: auto
uix:
  style: |
    mushroom-select-option-control {
      --control-height: 42px !important;
      padding: 3px !important; /* Increase this for more spacing around the button */
      box-sizing: border-box !important;
    }

Why this is great:

  • No complex absolute positioning or shadow-DOM hacking.
  • By changing padding: 3px, the dashboard automatically calculates perfect, symmetrical margins on all 4 sides (top, bottom, left, right).
  • Because of the layout setting, the cards below it align perfectly without leaving any dead whitespace.

Make sure to replace select.your_entity_here with your own entity ID. Hope this helps anyone building a minimalist dashboard!

1 Like