benct / lovelace-multiple-entity-row

Show multiple entity states and attributes on entity rows in Home Assistant's Lovelace UI
MIT License
792 stars 59 forks source link

Icons are not responsive #185

Closed gitisz closed 2 years ago

gitisz commented 3 years ago

Using a combination horizontal stack and vertical stack, when viewing from a smaller device, i.e. mobile, the icons do not wrap to the next line, but instead bleed over into other cards, causing them to be difficult to use or understand.

When viewed from a web-page: image

When viewed from mobile: image

          - type: horizontal-stack
            cards:
              - type: vertical-stack
                cards:
                  - type: gauge
                    entity: sensor.mrs_worden_battery_level
                    style: |
                      ha-card  {
                        background-color: rgba(0, 0, 0, 0.3);
                        box-shadow: none;
                      }
                    min: 0
                    max: 100
                    severity:
                      green: 75
                      yellow: 35
                      red: 0
                  - type: 'custom:multiple-entity-row'
                    entity: binary_sensor.mrs_worden_is_charging
                    show_state: false
                    state_color: true
                    name: ' '
                    entities:
                      - type: binary_sensor
                        entity: binary_sensor.mrs_worden_wifi_state
                        icon: true
                        name: false
                        state_color: true

                      - type: binary_sensor
                        entity: binary_sensor.mrs_worden_device_locked
                        icon: true
                        name: false
                        state_color: true

                      - type: binary_sensor
                        entity: binary_sensor.mrs_worden_bluetooth_state
                        icon: true
                        name: false
                        state_color: true

                      - type: binary_sensor
                        entity: binary_sensor.mrs_worden_headphones
                        icon: true
                        name: false
                        state_color: true

                      - type: button
                        icon: 'mdi:radar'
                        name: false
                        state_color: false
                        tap_action:
                          action: call-service
                          service: script.locate_wifes_phone
benct commented 2 years ago

This card is designed to be used in a entities card, not be itself (or in a stack). Not sure it will wrap either way though, as entity rows are not meant to wrap. You could probably use card-mod to modify the styles to make it wrap.