Auto hide empty sub-button row, and better color temp colors

[systems-monitor]

I am trying to set up color and RGB sliders for lights. Previously I used your bubble slider with a mushroom-light-card in a vertical stack, just enabled for temp and rgb, and would collapse to a small line when the light state is off.

When I set visibility on bubble sub button slider it disappears, but still draws the same size main button. Is there and easier way than defining a complex template for height to get the unused space to collapse.

Second tack on item: The color spread on your temp slider is not very distinctive. I recommend a more exaggerated warm to cool coloration like mushroom uses. Maybe even a little more blue on daylight end than they do.

type: custom:mushroom-light-card
entity: light.living_room_torche
use_light_color: true
show_color_control: true
collapsible_controls: true
layout: horizontal
primary_info: none
secondary_info: none
icon_type: none
name: Con
show_brightness_control: false
show_color_temp_control: true

[gpoitch]

I was also looking to achieve this. This collapses the bubble card:

styles: |
  .bubble-container {
    ${state !== 'on' ? 'height: calc(var(--row-height)) !important;' : ''}
  }

Unfortunately, the sections grid (outside of the card itself) seems to reserve the row space so there is still a gap.

[gpoitch]

Update: This solution works if you also place the bubble card in a native vertical-stack card, which will then collapse the rows. Here is an example:

[alexanderdominicnesbitt]

I'm struggling with making this work. Would you be able to review what I've shared below and offer some suggestions, please? Without the style code the card resizes within the editor view but either solution won't work within the dashboard view (within a vertical stack card). Any ideas?

Here is a recording: https://drive.google.com/file/d/1FkQqtm8Mbrqrm4UQmOcH8cXcTK4t_LRl/view?usp=drivesdk

Here is the Yaml:

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: button
    button_type: name
    sub_button:
      main:
        - name: "1"
          buttons_layout: inline
          group:
            - entity: light.lounge_lights
              light_background: false
              tap_action:
                action: toggle
        - name: "2"
          buttons_layout: inline
          group:
            - entity: light.wiz_tunable_white_151e0c
              icon: mdi:floor-lamp-outline
              visibility:
                - condition: state
                  entity: light.wiz_tunable_white_151e0c
                  state: "on"
              light_background: false
              tap_action:
                action: toggle
            - entity: light.lounge_light_ceiling
              visibility:
                - condition: state
                  entity: light.lounge_light_ceiling
                  state: "on"
              light_background: false
              tap_action:
                action: toggle
      bottom: []
      main_layout: rows
    name: ""
    show_icon: false
    styles: |
      .bubble-container {
        ${state !== 'on' ? 'height: calc(var(--row-height)) !important;' : ''}
        }
    rows: 1.688
    grid_options:
      columns: 6

[gpoitch]

Not sure, can't see the video but here's mine. The difference is I am hiding the bottom sub-buttons.

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: media-player
    entity: media_player.russound_zone_1
    icon: mdi:speaker
    name: Basement Surround
    show_state: true
    hide:
      play_pause_button: true
      next_button: true
      previous_button: true
      volume_button: true
    button_action:
      tap_action:
        action: more-info
    sub_button:
      main:
        - sub_button_type: select
          select_attribute: source_list
          icon: mdi:export
          content_layout: icon-left
          show_icon: true
          force_icon: false
          show_arrow: false
          visibility:
            - condition: state
              entity: media_player.russound_zone_1
              state: "on"
      bottom:
        - sub_button_type: slider
          name: volume
          icon: mdi:volume-high
          always_visible: true
          show_button_info: true
          fill_width: true
          custom_height: 28
          visibility:
            - condition: state
              entity: media_player.russound_zone_1
              state: "on"
    styles: |
      .bubble-container {
        ${state !== 'on' ? 'height: calc(var(--row-height)) !important;' : ''}
      }
    rows: 1.618

[alexanderdominicnesbitt]

I've fixed the video permissions so you should be able to view now. I wonder if its the media player card vs Name card functionality?

@Clooos any thoughts?

[Mamouti]

@alexanderdominicnesbitt I think it does not work in your case because your card isn't assigned to any entity, so it's "state" is always different to (!==) 'on'.

You may want to assign an entity to your card, or use the following:

.bubble-container {
    ${hass.states['light.lounge_lights'].state !== 'on' ? 'height: calc(var(--row-height)) !important;' : ''}
 }