Clooos / Bubble-Card

Bubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch.
MIT License
1.81k stars 52 forks source link

Sub Button Input Select Drop Down Menu Issue on thinner/smaller screens #624

Closed Doa132 closed 2 months ago

Doa132 commented 3 months ago

The input select drop down for sub buttons sometimes appears to go behind buttons that are lower down. Can't reproduce it with the main button as input select, so I think it's sub buttons only. This appears to only happen on my iOS app or when the macOS safari window is very narrow. It doesn't happen consistently but does seem to only be when the dropdown menu goes downwards instead of upwards from the button. I tried removing the vertical stacks and horizontal stacks that all the buttons are in but it still occurred. I also checked if it was just the lights by duplicating the Aircon button into 3 horizontal stack rows (exactly like the lights) and it occurs with that too.

Screenshot 2024-07-07 at 09 47 08 Screenshot 2024-07-07 at 10 08 10 Screenshot 2024-07-07 at 10 07 13

Code for lights in case that will help.


        - type: vertical-stack ## Group 3 - Lights
          cards:

            - type: custom:bubble-card
              card_type: separator
              name: Lights
              icon: mdi:lightbulb-group

            - type: horizontal-stack # 1st Row Lights
              cards:
                - type: custom:bubble-card # Lounge Light
                  card_type: button
                  button_type: slider
                  scrolling_effect: false
                  show_last_changed: true
                  show_attribute: false
                  show_state: false
                  show_name: false
                  columns: 1
                  card_layout: large-2-rows
                  entity: light.lounge
                  tap_action:
                    action: toggle
                  double_tap_action:
                    action: more-info
                  sub_button:
                    - name: Mode
                      entity: input_select.light_lounge_mode
                      card_type: select
                      button_type: state
                      show_icon: true
                      show_background: false
                      show_state: true
                      icon: mdi:lightbulb-group-outline

                    - name: Temp
                      entity: sensor.temp_lounge
                      show_icon: true
                      show_background: false
                      show_state: true
                  styles: |
                        .bubble-name-container {
                          margin-left: 0px;
                          margin-right: 0px;
                          font-size: 12px !important;
                            }

                        .bubble-icon-container {
                          margin-left: 0px;
                          margin-right: 1px;
                            }

                        .bubble-sub-button {
                          margin-left: 0px;
                          margin-right: -25px;
                          background: none !important;
                          border-radius: 0;
                          font-size: 8px !important;
                            }
                        .bubble-state {
                          font-size: 8px !important;
                            }

                        .bubble-sub-button-2 > ha-icon {
                         color: ${hass.states['sensor.temp_lounge'].state <= 15 ? 'var(--low-colour)' 
                         : hass.states['sensor.temp_lounge'].state <= 25 ? 'var(--primary-button-colour)' 
                         : 'var(--high-colour)'} !important;
                          }
                        .bubble-sub-button-2 {
                         color: ${hass.states['sensor.temp_lounge'].state <= 15 ? 'var(--low-colour)' 
                         : hass.states['sensor.temp_lounge'].state <= 25 ? 'var(--primary-button-colour)' 
                         : 'var(--high-colour)'} !important;
                        }

                        .bubble-sub-button-1 {
                         color: ${hass.states['input_select.light_lounge_mode'].state === 'Bright' ? 'var(--light-bright)' 
                         : hass.states['input_select.light_lounge_mode'].state === 'Soft' ? 'var(--light-soft)'  
                         : hass.states['input_select.light_lounge_mode'].state === 'Dim' ? 'var(--light-dim)' 
                         : hass.states['input_select.light_lounge_mode'].state === 'Dark' ? 'var(--light-dark)' 
                         : hass.states['input_select.light_lounge_mode'].state === 'Night' ? 'var(--light-soft)'
                         : 'var(--primary-button-colour)'} !important;
                        }
                        .bubble-sub-button-1 > ha-icon {
                         color: ${hass.states['input_select.light_lounge_mode'].state === 'Bright' ? 'var(--light-bright)' 
                         : hass.states['input_select.light_lounge_mode'].state === 'Soft' ? 'var(--light-soft)'  
                         : hass.states['input_select.light_lounge_mode'].state === 'Dim' ? 'var(--light-dim)' 
                         : hass.states['input_select.light_lounge_mode'].state === 'Dark' ? 'var(--light-dark)' 
                         : hass.states['input_select.light_lounge_mode'].state === 'Night' ? 'var(--light-soft)'
                         : 'var(--primary-button-colour)'} !important;
                        }

                        ${subButtonIcon[1].setAttribute("icon", hass.states['sensor.temp_lounge'].state <= 15 ? 'mdi:thermometer-chevron-down' 
                          : hass.states['sensor.temp_lounge'].state <= 25 ? 'mdi:thermometer'
                          : 'mdi:thermometer-chevron-up')}

                - type: custom:bubble-card # Kitchen Light
                  card_type: button
                  button_type: slider
                  scrolling_effect: false
                  show_last_changed: true
                  show_attribute: false
                  show_state: false
                  show_name: false
                  columns: 1
                  card_layout: large-2-rows
                  entity: light.kitchen
                  tap_action:
                    action: toggle
                  double_tap_action:
                    action: more-info
                  sub_button:
                    - name: Mode
                      entity: input_select.light_kitchen_mode
                      show_icon: true
                      icon:
                      show_background: false
                      show_state: true
                      icon: mdi:lightbulb-group-outline

                    - name: Temp
                      entity: sensor.temp_kitchen
                      show_icon: true
                      show_background: false
                      show_state: true
                  styles: |

                        .bubble-name-container {
                          margin-left: 0px;
                          margin-right: 0px;
                          font-size: 12px !important;
                            }

                        .bubble-icon-container {
                          margin-left: 0px;
                          margin-right: 1px;
                            }
                        .bubble-sub-button {
                          margin-left: 0px;
                          margin-right: -25px;
                          background: none !important;
                          border-radius: 0;
                          font-size: 8px !important;
                            }
                        .bubble-state {
                          font-size: 8px !important;
                            }

                        .bubble-sub-button-2 > ha-icon {
                         color: ${hass.states['sensor.temp_kitchen'].state <= 15 ? 'var(--low-colour)' 
                         : hass.states['sensor.temp_kitchen'].state <= 25 ? 'var(--primary-button-colour)' 
                         : 'var(--high-colour)'} !important;
                          }
                        .bubble-sub-button-2 {
                         color: ${hass.states['sensor.temp_kitchen'].state <= 15 ? 'var(--low-colour)' 
                         : hass.states['sensor.temp_kitchen'].state <= 25 ? 'var(--primary-button-colour)' 
                         : 'var(--high-colour)'} !important;
                        }

                        .bubble-sub-button-1 {
                         color: ${hass.states['input_select.light_kitchen_mode'].state === 'Bright' ? 'var(--light-bright)' 
                         : hass.states['input_select.light_kitchen_mode'].state === 'Soft' ? 'var(--light-soft)'  
                         : hass.states['input_select.light_kitchen_mode'].state === 'Dim' ? 'var(--light-dim)' 
                         : hass.states['input_select.light_kitchen_mode'].state === 'Dark' ? 'var(--light-dark)' 
                         : hass.states['input_select.light_kitchen_mode'].state === 'Night' ? 'var(--light-soft)'
                         : 'var(--primary-button-colour)'} !important;
                        }
                        .bubble-sub-button-1 > ha-icon {
                         color: ${hass.states['input_select.light_kitchen_mode'].state === 'Bright' ? 'var(--light-bright)' 
                         : hass.states['input_select.light_kitchen_mode'].state === 'Soft' ? 'var(--light-soft)'  
                         : hass.states['input_select.light_kitchen_mode'].state === 'Dim' ? 'var(--light-dim)' 
                         : hass.states['input_select.light_kitchen_mode'].state === 'Dark' ? 'var(--light-dark)' 
                         : hass.states['input_select.light_kitchen_mode'].state === 'Night' ? 'var(--light-soft)'
                         : 'var(--primary-button-colour)'} !important;
                        }

                        ${subButtonIcon[1].setAttribute("icon", hass.states['sensor.temp_kitchen'].state <= 15 ? 'mdi:thermometer-chevron-down' 
                          : hass.states['sensor.temp_kitchen'].state <= 25 ? 'mdi:thermometer'
                          : 'mdi:thermometer-chevron-up')}

            - type: horizontal-stack # 2nd Row Lights
              cards:

                - type: conditional # Bedroom Globe
                  conditions:
                    - entity: input_select.light_bedroom
                      state: "Globe"
                  card:
                      type: custom:bubble-card
                      card_type: button
                      button_type: slider
                      scrolling_effect: false
                      show_last_changed: true
                      show_attribute: false
                      show_state: false
                      show_name: false
                      columns: 1
                      card_layout: large-2-rows
                      entity: light.bedroom_globe
                      tap_action:
                        action: toggle
                      double_tap_action:
                        action: more-info
                      hold_action:
                        action: call-service
                        service: input_select.select_option
                        data:
                          entity_id: input_select.light_bedroom
                          option: "Lamp"
                      sub_button:
                        - name: Mode
                          entity: input_select.light_bedroom_globe_mode
                          show_icon: true
                          icon:
                          show_background: false
                          show_state: true
                          icon: mdi:lightbulb-group-outline

                        - name: Temp
                          entity: sensor.temp_bedroom
                          show_icon: true
                          show_background: false
                          show_state: true
                      styles: |
                        .bubble-name-container {
                          margin-left: 0px;
                          margin-right: 0px;
                          font-size: 12px !important;
                            }

                        .bubble-icon-container {
                          margin-left: 0px;
                          margin-right: 1px;
                            }

                        .bubble-sub-button {
                          margin-left: 0px;
                          margin-right: -25px;
                          background: none !important;
                          border-radius: 0;
                          font-size: 8px !important;
                            }
                        .bubble-state {
                          font-size: 8px !important;
                            }

                        .bubble-sub-button-2 > ha-icon {
                         color: ${hass.states['sensor.temp_bedroom'].state <= 15 ? 'var(--low-colour)' 
                         : hass.states['sensor.temp_bedroom'].state <= 25 ? 'var(--primary-button-colour)' 
                         : 'var(--high-colour)'} !important;
                          }
                        .bubble-sub-button-2 {
                         color: ${hass.states['sensor.temp_bedroom'].state <= 15 ? 'var(--low-colour)' 
                         : hass.states['sensor.temp_bedroom'].state <= 25 ? 'var(--primary-button-colour)' 
                         : 'var(--high-colour)'} !important;
                        }

                        .bubble-sub-button-1 {
                         color: ${hass.states['input_select.light_bedroom_globe_mode'].state === 'Bright' ? 'var(--light-bright)' 
                         : hass.states['input_select.light_bedroom_globe_mode'].state === 'Soft' ? 'var(--light-soft)'  
                         : hass.states['input_select.light_bedroom_globe_mode'].state === 'Dim' ? 'var(--light-dim)' 
                         : hass.states['input_select.light_bedroom_globe_mode'].state === 'Dark' ? 'var(--light-dark)' 
                         : hass.states['input_select.light_bedroom_globe_mode'].state === 'Night' ? 'var(--light-soft)'
                         : 'var(--primary-button-colour)'} !important;
                        }
                        .bubble-sub-button-1 > ha-icon {
                         color: ${hass.states['input_select.light_bedroom_globe_mode'].state === 'Bright' ? 'var(--light-bright)' 
                         : hass.states['input_select.light_bedroom_globe_mode'].state === 'Soft' ? 'var(--light-soft)'  
                         : hass.states['input_select.light_bedroom_globe_mode'].state === 'Dim' ? 'var(--light-dim)' 
                         : hass.states['input_select.light_bedroom_globe_mode'].state === 'Dark' ? 'var(--light-dark)' 
                         : hass.states['input_select.light_bedroom_globe_mode'].state === 'Night' ? 'var(--light-soft)'
                         : 'var(--primary-button-colour)'} !important;
                        }

                        ${subButtonIcon[1].setAttribute("icon", hass.states['sensor.temp_bedroom'].state <= 15 ? 'mdi:thermometer-chevron-down' 
                          : hass.states['sensor.temp_bedroom'].state <= 25 ? 'mdi:thermometer'
                          : 'mdi:thermometer-chevron-up')}

                - type: conditional  # Bedroom Lamp
                  conditions:
                    - entity: input_select.light_bedroom
                      state: "Lamp"
                  card:
                      type: custom:bubble-card
                      card_type: button
                      button_type: slider
                      scrolling_effect: false
                      show_last_changed: true
                      show_attribute: false
                      show_state: false
                      show_name: false
                      columns: 1
                      card_layout: large-2-rows
                      entity: light.bedroom_lamp
                      tap_action:
                        action: toggle
                      double_tap_action:
                        action: more-info
                      hold_action:
                        action: call-service
                        service: input_select.select_option
                        data:
                          entity_id: input_select.light_bedroom
                          option: "Globe"
                      sub_button:

                        - name: Mode
                          entity: input_select.light_bedroom_lamp_mode
                          show_icon: true
                          icon:
                          show_background: false
                          show_state: true
                          icon: mdi:lightbulb-group-outline

                        - name: Temp
                          entity: sensor.temp_bedroom
                          show_icon: true
                          show_background: false
                          show_state: true
                      styles: |
                        .bubble-name-container {
                          margin-left: 0px;
                          margin-right: 0px;
                          font-size: 12px !important;
                            }

                        .bubble-icon-container {
                          margin-left: 0px;
                          margin-right: 1px;
                            }

                        .bubble-sub-button {
                          margin-left: 0px;
                          margin-right: -25px;
                          background: none !important;
                          border-radius: 0;
                          font-size: 8px !important;
                            }
                        .bubble-state {
                          font-size: 8px !important;
                            }

                        .bubble-sub-button-2 > ha-icon {
                         color: ${hass.states['sensor.temp_bedroom'].state <= 15 ? 'var(--low-colour)' 
                         : hass.states['sensor.temp_bedroom'].state <= 25 ? 'var(--primary-button-colour)' 
                         : 'var(--high-colour)'} !important;
                          }
                        .bubble-sub-button-2 {
                         color: ${hass.states['sensor.temp_bedroom'].state <= 15 ? 'var(--low-colour)' 
                         : hass.states['sensor.temp_bedroom'].state <= 25 ? 'var(--primary-button-colour)' 
                         : 'var(--high-colour)'} !important;
                        }

                        .bubble-sub-button-1 {
                         color: ${hass.states['input_select.light_bedroom_lamp_mode'].state === 'Bright' ? 'var(--light-bright)' 
                         : hass.states['input_select.light_bedroom_lamp_mode'].state === 'Soft' ? 'var(--light-soft)'  
                         : hass.states['input_select.light_bedroom_lamp_mode'].state === 'Dim' ? 'var(--light-dim)' 
                         : hass.states['input_select.light_bedroom_lamp_mode'].state === 'Dark' ? 'var(--light-dark)' 
                         : hass.states['input_select.light_bedroom_lamp_mode'].state === 'Night' ? 'var(--light-soft)'
                         : 'var(--primary-button-colour)'} !important;
                        }
                        .bubble-sub-button-1 > ha-icon {
                         color: ${hass.states['input_select.light_bedroom_lamp_mode'].state === 'Bright' ? 'var(--light-bright)' 
                         : hass.states['input_select.light_bedroom_lamp_mode'].state === 'Soft' ? 'var(--light-soft)'  
                         : hass.states['input_select.light_bedroom_lamp_mode'].state === 'Dim' ? 'var(--light-dim)' 
                         : hass.states['input_select.light_bedroom_lamp_mode'].state === 'Dark' ? 'var(--light-dark)' 
                         : hass.states['input_select.light_bedroom_lamp_mode'].state === 'Night' ? 'var(--light-soft)'
                         : 'var(--primary-button-colour)'} !important;
                        }

                        ${subButtonIcon[1].setAttribute("icon", hass.states['sensor.temp_bedroom'].state <= 15 ? 'mdi:thermometer-chevron-down' 
                          : hass.states['sensor.temp_bedroom'].state <= 25 ? 'mdi:thermometer'
                          : 'mdi:thermometer-chevron-up')}

                - type: custom:bubble-card ## Bathroom Light
                  card_type: button
                  button_type: slider
                  scrolling_effect: false
                  show_last_changed: true
                  show_attribute: false
                  show_state: false
                  show_name: false
                  columns: 1
                  card_layout: large-2-rows
                  entity: light.bathroom
                  tap_action:
                    action: toggle
                  double_tap_action:
                    action: more-info
                  sub_button:
                    - name: Mode
                      entity: input_select.light_bathroom_mode
                      show_icon: true
                      icon:
                      show_background: false
                      show_state: true
                      icon: mdi:lightbulb-group-outline

                    - name: Temp
                      entity: sensor.temp_bathroom
                      show_icon: true
                      show_background: false
                      show_state: true
                  styles: |
                        .bubble-name-container {
                          margin-left: 0px;
                          margin-right: 0px;
                          font-size: 12px !important;
                            }

                        .bubble-icon-container {
                          margin-left: 0px;
                          margin-right: 1px;
                            }

                        .bubble-sub-button {
                          margin-left: 0px;
                          margin-right: -25px;
                          background: none !important;
                          border-radius: 0;
                          font-size: 8px !important;
                            }

                        .bubble-state {
                          font-size: 8px !important;
                            }

                        .bubble-sub-button-2 > ha-icon {
                         color: ${hass.states['sensor.temp_bathroom'].state <= 15 ? 'var(--low-colour)' 
                         : hass.states['sensor.temp_bathroom'].state <= 25 ? 'var(--primary-button-colour)' 
                         : 'var(--high-colour)'} !important;
                          }
                        .bubble-sub-button-2 {
                         color: ${hass.states['sensor.temp_bathroom'].state <= 15 ? 'var(--low-colour)' 
                         : hass.states['sensor.temp_bathroom'].state <= 25 ? 'var(--primary-button-colour)' 
                         : 'var(--high-colour)'} !important;
                        }

                        .bubble-sub-button-1 {
                         color: ${hass.states['input_select.light_bathroom_mode'].state === 'Bright' ? 'var(--light-bright)' 
                         : hass.states['input_select.light_bathroom_mode'].state === 'Soft' ? 'var(--light-soft)'  
                         : hass.states['input_select.light_bathroom_mode'].state === 'Dim' ? 'var(--light-dim)' 
                         : hass.states['input_select.light_bathroom_mode'].state === 'Dark' ? 'var(--light-dark)' 
                         : hass.states['input_select.light_bathroom_mode'].state === 'Night' ? 'var(--light-soft)'
                         : 'var(--primary-button-colour)'} !important;
                        }
                        .bubble-sub-button-1 > ha-icon {
                         color: ${hass.states['input_select.light_bathroom_mode'].state === 'Bright' ? 'var(--light-bright)' 
                         : hass.states['input_select.light_bathroom_mode'].state === 'Soft' ? 'var(--light-soft)'  
                         : hass.states['input_select.light_bathroom_mode'].state === 'Dim' ? 'var(--light-dim)' 
                         : hass.states['input_select.light_bathroom_mode'].state === 'Dark' ? 'var(--light-dark)' 
                         : hass.states['input_select.light_bathroom_mode'].state === 'Night' ? 'var(--light-soft)'
                         : 'var(--primary-button-colour)'} !important;
                        }

                        ${subButtonIcon[1].setAttribute("icon", hass.states['sensor.temp_bathroom'].state <= 15 ? 'mdi:thermometer-chevron-down' 
                          : hass.states['sensor.temp_bathroom'].state <= 25 ? 'mdi:thermometer'
                          : 'mdi:thermometer-chevron-up')}

            - type: horizontal-stack # 3rd Row Lights
              cards: 

                - type: custom:bubble-card # Toilet Light
                  card_type: button
                  button_type: slider
                  scrolling_effect: false
                  show_last_changed: true
                  show_attribute: false
                  show_state: false
                  show_name: false
                  columns: 1
                  card_layout: large-2-rows
                  entity: light.toilet
                  tap_action:
                    action: toggle
                  double_tap_action:
                    action: more-info
                  sub_button:
                    - name: Mode
                      entity: input_select.light_toilet_mode

                      show_icon: true
                      icon:
                      show_background: false
                      show_state: true
                      icon: mdi:lightbulb-group-outline

                    - name: Temp
                      entity: sensor.temp_toilet
                      show_icon: true
                      show_background: false
                      show_state: true
                  styles: |
                        .bubble-name-container {
                          margin-left: 0px;
                          margin-right: 0px;
                          font-size: 12px !important;
                            }

                        .bubble-icon-container {
                          margin-left: 0px;
                          margin-right: 1px;
                            }

                        .bubble-sub-button {
                          margin-left: 0px;
                          margin-right: -25px;
                          background: none !important;
                          border-radius: 0;
                          font-size: 8px !important;
                            }
                        .bubble-state {
                          font-size: 8px !important;
                            }

                        .bubble-sub-button-2 > ha-icon {
                         color: ${hass.states['sensor.temp_toilet'].state <= 15 ? 'var(--low-colour)' 
                         : hass.states['sensor.temp_toilet'].state <= 25 ? 'var(--primary-button-colour)' 
                         : 'var(--high-colour)'} !important;
                          }
                        .bubble-sub-button-2 {
                         color: ${hass.states['sensor.temp_toilet'].state <= 15 ? 'var(--low-colour)' 
                         : hass.states['sensor.temp_toilet'].state <= 25 ? 'var(--primary-button-colour)' 
                         : 'var(--high-colour)'} !important;
                        }

                        .bubble-sub-button-1 {
                         color: ${hass.states['input_select.light_toilet_mode'].state === 'Bright' ? 'var(--light-bright)' 
                         : hass.states['input_select.light_toilet_mode'].state === 'Soft' ? 'var(--light-soft)'  
                         : hass.states['input_select.light_toilet_mode'].state === 'Dim' ? 'var(--light-dim)' 
                         : hass.states['input_select.light_toilet_mode'].state === 'Dark' ? 'var(--light-dark)' 
                         : hass.states['input_select.light_toilet_mode'].state === 'Night' ? 'var(--light-soft)'
                         : 'var(--primary-button-colour)'} !important;
                        }
                        .bubble-sub-button-1 > ha-icon {
                         color: ${hass.states['input_select.light_toilet_mode'].state === 'Bright' ? 'var(--light-bright)' 
                         : hass.states['input_select.light_toilet_mode'].state === 'Soft' ? 'var(--light-soft)'  
                         : hass.states['input_select.light_toilet_mode'].state === 'Dim' ? 'var(--light-dim)' 
                         : hass.states['input_select.light_toilet_mode'].state === 'Dark' ? 'var(--light-dark)' 
                         : hass.states['input_select.light_toilet_mode'].state === 'Night' ? 'var(--light-soft)'
                         : 'var(--primary-button-colour)'} !important;
                        }

                        ${subButtonIcon[1].setAttribute("icon", hass.states['sensor.temp_toilet'].state <= 15 ? 'mdi:thermometer-chevron-down' 
                          : hass.states['sensor.temp_toilet'].state <= 25 ? 'mdi:thermometer'
                          : 'mdi:thermometer-chevron-up')}

                - type: custom:bubble-card # Laundry Light
                  card_type: button
                  button_type: slider
                  scrolling_effect: false
                  show_last_changed: true
                  show_attribute: false
                  show_state: false
                  show_name: false
                  columns: 1
                  card_layout: large-2-rows
                  entity: light.laundry
                  tap_action:
                    action: toggle
                  double_tap_action:
                    action: more-info
                  sub_button:
                    - name: Mode
                      entity: input_select.light_laundry_mode
                      show_icon: true
                      icon:
                      show_background: false
                      show_state: true
                      icon: mdi:lightbulb-group-outline

                    - name: Temp
                      entity: sensor.temp_laundry
                      show_icon: true
                      show_background: false
                      show_state: true
                  styles: |
                        .bubble-name-container {
                          margin-left: 0px;
                          margin-right: 0px;
                          font-size: 12px !important;
                            }

                        .bubble-icon-container {
                          margin-left: 0px;
                          margin-right: 1px;
                            }

                        .bubble-sub-button {
                          margin-left: 0px;
                          margin-right: -25px;
                          background: none !important;
                          border-radius: 0;
                          font-size: 8px !important;
                            }
                        .bubble-state {
                          font-size: 8px !important;
                            }

                        .bubble-sub-button-2 > ha-icon {
                         color: ${hass.states['sensor.temp_laundry'].state <= 15 ? 'var(--low-colour)' 
                         : hass.states['sensor.temp_laundry'].state <= 25 ? 'var(--primary-button-colour)' 
                         : 'var(--high-colour)'} !important;
                          }
                        .bubble-sub-button-2 {
                         color: ${hass.states['sensor.temp_laundry'].state <= 15 ? 'var(--low-colour)' 
                         : hass.states['sensor.temp_laundry'].state <= 25 ? 'var(--primary-button-colour)' 
                         : 'var(--high-colour)'} !important;
                        }

                        .bubble-sub-button-1 {
                         color: ${hass.states['input_select.light_laundry_mode'].state === 'Bright' ? 'var(--light-bright)' 
                         : hass.states['input_select.light_laundry_mode'].state === 'Soft' ? 'var(--light-soft)'  
                         : hass.states['input_select.light_laundry_mode'].state === 'Dim' ? 'var(--light-dim)' 
                         : hass.states['input_select.light_laundry_mode'].state === 'Dark' ? 'var(--light-dark)' 
                         : hass.states['input_select.light_laundry_mode'].state === 'Night' ? 'var(--light-soft)'
                         : 'var(--primary-button-colour)'} !important;
                        }
                        .bubble-sub-button-1 > ha-icon {
                         color: ${hass.states['input_select.light_laundry_mode'].state === 'Bright' ? 'var(--light-bright)' 
                         : hass.states['input_select.light_laundry_mode'].state === 'Soft' ? 'var(--light-soft)'  
                         : hass.states['input_select.light_laundry_mode'].state === 'Dim' ? 'var(--light-dim)' 
                         : hass.states['input_select.light_laundry_mode'].state === 'Dark' ? 'var(--light-dark)' 
                         : hass.states['input_select.light_laundry_mode'].state === 'Night' ? 'var(--light-soft)'
                         : 'var(--primary-button-colour)'} !important;
                        }

                        ${subButtonIcon[1].setAttribute("icon", hass.states['sensor.temp_laundry'].state <= 15 ? 'mdi:thermometer-chevron-down' 
                          : hass.states['sensor.temp_laundry'].state <= 25 ? 'mdi:thermometer'
                          : 'mdi:thermometer-chevron-up')}
Clooos commented 3 months ago

Thank you for the detailed feedback, I will take a look at this!

KlumzyKlein commented 2 months ago

Just to add (and apologies for my duplicate bug #643) the issue also happens on chrome / android. Did a test on both section and masonry page on its own page and still occurs.

KlumzyKlein commented 2 months ago

Issue persists for me in beta 2.10-beta3

Clooos commented 2 months ago

Have you cleared your cache?

KlumzyKlein commented 2 months ago

Have you cleared your cache?

Yes, fist via F12 + Long Press on Refresh, Empty Cache and Hard Reload. Then tried incognito on chrome so fresh cache. Also rebooted HA as another check. Can confirm on beta3 for definite as select entities in the select card drop down in addition to input_select.

Clooos commented 2 months ago

Damn... Can you show me a screenshot so that I can see what cards are overlapping it?

Can you also check in your browser console to see if there is any error?

KlumzyKlein commented 2 months ago

Interestingly, the first time I click one, it's fine: image

Clicking the same one over and over and nothing changes. After clicking a few others, it then starts to go under: image image

I can produce the error with as little as two cards, so here is some YAML:

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: button
    button_type: slider
    entity: light.entrance
    name: Entrance Light
    icon: mdi:ceiling-light
    tap_action:
      action: toggle
    sub_button:
      - entity: input_select.rgb_lights_scene_selection_entrance
        show_name: false
        show_state: true
        icon: mdi:lightbulb-group
        show_background: true
        show_attribute: false
        attribute: friendly_name
        show_last_changed: false
        show_icon: true
        show_arrow: false
    card_layout: large
  - type: custom:bubble-card
    card_type: button
    button_type: slider
    entity: light.bedroom
    name: Bedroom Light
    icon: mdi:ceiling-light
    tap_action:
      action: toggle
    sub_button:
      - entity: input_select.rgb_lights_scene_selection_bedroom
        show_name: false
        show_state: true
        icon: mdi:lightbulb-group
        show_background: true
        show_attribute: false
        attribute: friendly_name
        show_last_changed: false
        show_icon: true
    card_layout: large
KlumzyKlein commented 2 months ago

Nothing in console, opened fresh window: image

Doa132 commented 2 months ago

Unfortunately, it's not fixed for me either.

Clooos commented 2 months ago

Hi everyone, this issue should be now fully fixed, I can't wait for your feedbacks!

KlumzyKlein commented 2 months ago

This is fixed for me in beta 4, thank you :)

Surimisalade commented 1 month ago

Hmmm, i still have this issue.. Bubble card is installed via HACS. before it was installed locally, but i think i removed all of the local files. image

Clooos commented 1 month ago

What version do you see when you take a look at the Bubble Card editor?

Surimisalade commented 1 month ago

What version do you see when you take a look at the Bubble Card editor?

Screenshot_20240811_090715_Home Assistant

Clooos commented 1 month ago

This is the right version. Can you share the YAML of this pop-up?

You can also try the last beta but that should not make a difference.

Surimisalade commented 1 month ago
type: vertical-stack
cards:
  - type: vertical-stack
    cards:
      - type: custom:bubble-card
        card_type: pop-up
        show_header: false
        hash: '#toestellen'
      - type: custom:bubble-card
        card_type: separator
        name: t o e s t e l l e n
        card_layout: normal
      - type: custom:bubble-card
        button_type: name
        name: ' '
        scrolling_effect: false
        double_tap_action:
          action: none
        hold_action:
          action: none
        button_action:
          tap_action:
            action: none
          double_tap_action:
            action: none
          hold_action:
            action: none
        sub_button:
          - entity: input_select.robotstofzuiger_spot_clean
            show_background: false
            show_state: true
            show_icon: false
            show_arrow: false
            name: Ruimte
            show_last_changed: false
            show_attribute: false
          - entity: input_select.robotstofzuiger_keuzelijst_stofzuig_mop_beide
            name: Uitvoering
            show_background: false
            icon: mdi:home-import-outline
            tap_action:
              action: call-service
              service: vacuum.return_to_base
              target:
                entity_id: vacuum.roborock_q_revo
            show_icon: false
            show_arrow: false
            show_state: true
          - entity: vacuum.roborock_q_revo
            name: Start
            icon: mdi:play
            show_background: false
            tap_action:
              action: call-service
              service: automation.trigger
              target:
                entity_id: automation.lovelace_robotstofzuiger_beneden
        card_layout: large
        styles: |-
          ha-card { 
            font-size: 14px;
            opacity: 0.95;
          }
          .bubble-button-card-container {
            background: ${hass.states['binary_sensor.roborock_q_revo_schoonmaken'].state === 'on' ? '#e48150' : ''} !important;
          }

                    .bubble-icon {
                      opacity: ${hass.states['binary_sensor.roborock_q_revo_schoonmaken'].state === 'on' ? '1' : '1'} !important;
                        color: ${hass.states['binary_sensor.roborock_q_revo_schoonmaken'].state === 'on' ? '#e48150' : 'lightgrey'} !important;
                    }

                    ${hass.states['binary_sensor.roborock_q_revo_schoonmaken'].state === 'off' ?
                    icon.setAttribute("icon", "mdi:robot-vacuum-variant-off") :
                    icon.setAttribute("icon", "mdi:robot-vacuum-variant")};
        show_attribute: false
        icon: mdi:robot-vacuum-variant-off
        show_state: false
        show_name: false
        show_last_changed: false
        show_icon: true
        entity: select.roborock_q_revo_mop_intensity
        force_icon: true
        card_type: button
      - type: custom:bubble-card
        card_type: separator
      - square: false
        type: grid
        cards:
          - type: custom:bubble-card
            card_type: button
            name: PC
            auto_order: false
            icon: mdi:desktop-tower-monitor
            scrolling_effect: false
            tap_action:
              action: call-service
              service: script.trigger
              target:
                entity_id: script.pc_aanzetten
            show_name: false
            entity: script.pc_aanzetten
            card_layout: normal
            styles: |+
              ha-card { 
                font-size: 14px;
                opacity: 0.95;
              }
              .bubble-button-card-container {
                background: ${hass.states['switch.pc_speakers_speakers'].state === 'on' ? '#e48150' : ''} !important;
              }

                        .bubble-icon {
                          opacity: ${hass.states['switch.pc_speakers_speakers'].state === 'on' ? '1' : '1'} !important;
                            color: ${hass.states['switch.pc_speakers_speakers'].state === 'on' ? '#e48150' : 'lightgrey'} !important;
                        }

          - type: custom:bubble-card
            card_type: button
            entity: media_player.lg_webos_smart_tv
            icon: mdi:television-classic
            name: TV
            show_icon: true
            show_name: false
            scrolling_effect: false
            card_layout: normal
            styles: |
              ha-card { 
                font-size: 14px;
                opacity: 0.95;
              }
              .bubble-button-background {
                background: ${hass.states['media_player.lg_webos_smart_tv'].state === 'on' ? '#e48150' : ''} !important;
              }

                        .bubble-icon {
                          opacity: ${hass.states['media_player.lg_webos_smart_tv'].state === 'on' ? '1' : '1'} !important;
                            color: ${hass.states['media_player.lg_webos_smart_tv'].state === 'on' ? '#e48150' : 'lightgrey'} !important;
                        }

                        ${hass.states['media_player.lg_webos_smart_tv'].state === 'off' ?
                        icon.setAttribute("icon", "mdi:television-classic-off") :
                        icon.setAttribute("icon", "mdi:television-classic")};
            tap_action:
              action: call-service
              service: script.turn_on
              target:
                entity_id: script.tv_aanzetten
            double_tap_action:
              action: none
            hold_action:
              action: none
            button_action:
              tap_action:
                action: call-service
                target:
                  entity_id: script.tv_aanzetten
                service: script.turn_on
              hold_action:
                action: none
              double_tap_action:
                action: none
          - type: custom:bubble-card
            card_type: button
            entity: switch.3d_printer_3
            icon: mdi:printer-3d-nozzle
            show_name: false
            name: 3D Printer
            scrolling_effect: false
            card_layout: normal
            tap_action:
              url_path: https://home.gsmartcrib.com/lovelace/3d-printer
              action: navigate
              navigation_path: /test-bubble/3d-printer
            double_tap_action:
              action: none
            hold_action:
              action: none
            button_action:
              tap_action:
                action: navigate
                navigation_path: /test-bubble/3d-printer
              double_tap_action:
                action: none
              hold_action:
                action: none
            styles: |
              ha-card { 
                font-size: 14px;
                opacity: 0.95;
              }
              .bubble-button-background {
                background: ${hass.states['switch.3d_printer_3'].state === 'on' ? '#e48150' : ''} !important;
              }

                        .bubble-icon {
                          opacity: ${hass.states['switch.3d_printer_3'].state === 'on' ? '1' : '1'} !important;
                            color: ${hass.states['switch.3d_printer_3'].state === 'on' ? '#e48150' : 'lightgrey'} !important;
                        }

                        ${hass.states['switch.3d_printer_3'].state === 'on' ?
                        icon.setAttribute("icon", "mdi:printer-3d-nozzle") :
                        icon.setAttribute("icon", "mdi:printer-3d-nozzle-off")};
        columns: 2
Clooos commented 1 month ago

Thank you, I will take a look at that!

Surimisalade commented 1 month ago

Thank you, I will take a look at that!

Hi there @Clooos, Did you manage to find something yet? You don't have to rush but just wondering.

Thanks in advance!