horizontal scrolling

[Polimac]

hi again me :)

i got horizontal scrolling issue in app on mobile , when your card is in dashboard i am able to move horizontally screen

code

type: custom:room-card title: Livingroom rows:

• entities:
  • entity: light.livingroom_ceiling name: Livingroom ceiling icon: mdi:ceiling-light tap_action: action: toggle
  • entity: light.0x00124b0022727206 name: Livingroom Ambient icon: mdi:led-strip tap_action: action: more-info
  • entity: light.livingroomspotlight name: Livingroom Spot icon: mdi:track-light tap_action: action: toggle
  • entity: light.wc_pathway name: WC Pathway icon: mdi:lightbulb tap_action: action: toggle
• entities:
  • entity: light.kitchen_spot_1 name: Kitchen Spot 1 icon: mdi:ceiling-light-multiple tap_action: action: toggle
  • entity: light.kitchen_spot_2 name: Kitchen Spot 2 icon: mdi:ceiling-light-multiple tap_action: action: toggle
  • entity: light.kitchen_led name: Kitchen Led icon: mdi:led-strip tap_action: action: toggle
• entities:
  • entity: light.wc_ceiling name: WC Ceiling icon: mdi:ceiling-light-multiple tap_action: action: toggle
  • entity: light.wc_mirror name: WC Mirror light icon: mdi:led-strip-variant tap_action: action: toggle
  • entity: switch.0x5c0272fffe1cae01_l1 name: WC Ventilation icon: mdi:fan state_color: true tap_action: action: toggle
• entities:
  • entity: light.doorwaygrouplight name: Doorway icon: mdi:ceiling-light-multiple tap_action: action: toggle
  • entity: light.hallway name: Hallway icon: mdi:ceiling-light-multiple tap_action: action: toggle
• entities:
  • entity: cover.0xa4c13862a3c38fec name: Shade tap_action: action: toggle state_color: true
  • entity: fan.0xb4e3f9fffe2b20e6 name: Airpurifier icon: mdi:air-filter tap_action: action: more-info state_color: true info_entities:
• entity: sensor.livingroomsensor_temperature
• entity: sensor.livingroomsensor_humidity
• entity: sensor.0xb4e3f9fffe2b20e6_pm25

[marcokreeft87]

Reading back my comment didnt make sense. I think there is something that is waayy to wide for this view. Dont think this is because of the room card tho. Could be that it only happens when the card is being added. But everything in the card is nice and neat between the borders of the card in your screenshot. Isnt there something lower that is wider than the view?

[mihsu81]

@marcokreeft87 I can confirm the issue in my case.

[marcokreeft87]

@mihsu81 can you make the names shorter? See if that helps

[mihsu81]

@marcokreeft87 Doesn't seem to help. I've also removed the additional styling from the card.

[marcokreeft87]

Hmm and make rows of 5 entities max?

[marcokreeft87]

And what's that weird bar to the right?

[marcokreeft87]

Idk guys, I cant reproduce:

type: custom:room-card
title: test
entity: light.mancave_lampen
icon: mdi:floor-lamp-outline
show_icon: true
tap_action:
  action: toggle
rows:
  - entities:
      - entity: light.mancave_lamp
        name: Plafond dfdfdfd fdfdfdsfdsfds
        tap_action:
          action: toggle
        hold_action:
          action: more-info
      - entity: light.mancave_lamp
        name: Plafond dfdfdfd fdfdfdsfdsfds
      - entity: light.mancave_lamp
        name: Plafond dfdfdfd fdfdfdsfdsfds
      - entity: light.mancave_lamp
        name: Plafond
      - entity: light.mancave_lamp
        name: Plafond
      - entity: light.mancave_lamp
        name: Plafond
      - entity: light.mancave_lamp
        name: Plafond
      - entity: light.mancave_lamp
        name: Plafond
      - entity: light.mancave_lamp
        name: Plafond
      - entity: light.mancave_lamp
        name: Plafond
  - entities:
      - entity: light.mancave_lamp
        name: Plafond
        tap_action:
          action: toggle
        hold_action:
          action: more-info

[Polimac]

i think it is related to info_entities

[marcokreeft87]

i think it is related to info_entities

Can you reproduce with only info_entities? Because I think it can only be something with the rows. But I cant reproduce :(

[mihsu81]

I've reduced the number of entities per row to 5 and the issue persists. The bar to the right is created by the HA app when the size is higher. It's the same color as the upper frame.

[marcokreeft87]

Hmm, can you try a different theme? Or tell me your theme? I will try it on my HA with the same theme then

[mihsu81]

The issue appears with the default theme as well. The theme is https://github.com/tgcowell/waves.

[marcokreeft87]

Super weird. Share the yaml of that dashboard plz and I will try to reproduce. But since I see so many without this problem I'm inclined to say it's something in your settings. But let's see

[mihsu81]

title: Home Dashboard
views:
  - title: Test room card
    path: test-room-card
    badges: []
    cards:
      - type: custom:room-card
        title: Kitchen
        entity: binary_sensor.area_kitchen
        icon: hue:room-kitchen
        state_color: true
        show_state: true
        show_icon: true
        column: false
        rows:
          - entities:
              - entity: light.kitchen_light
                name: Light
                icon: hue:pendant-cher
                state_color: true
                show_state: true
                show_icon: true
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info

It does make sense that it's some card we have installed, but who knows which. Here's a list of Frontend integrations I have installed. Stack In Card Purifier Card Vacuum Card Config Template Card Simple Weather Card Vertical Slider Cover Card KNX User Forum Icon Set Simple Thermostat badge-card card-mod BHA Icon Pack bignumber-card Custom brand icons Vertical Stack In Card mini-graph-card Xiaomi Vacuum Map Card Bar Card card-tools slider-entity-row Mini Media Player mini climate card button-card auto-entities Hass Hue Icons Alarmo Card Waves Body Miscale Card Config Editor Card Better Thermostat UI history-explorer-card Plotly Graph Card Thermal Comfort Icons Only Lock Lock Row Flower Card Nordic Theme custom-icons TV Remote Card (with touchpad and haptic feedback) My Cards Bundle Swiss Army Knife custom card Valetudo Map Card Room Card

[marcokreeft87]

Hmm wild guess, since it's the horizontal space you have an issue with: Slider card?

Can you try without the slider card? Maybe it uses some classes room card also uses.

I'm trying as we speak to install some frontend integrations from your list.

[mihsu81]

Not all of these Frontend integrations are used in that View or in the Dashboard itself. That Slider card is for cover entities. I've removed it and didn't make a difference. I've created a new Dashboard and again the View can be moved to the left even though it shouldn't. Maybe we're taking the wrong approach in finding the issue, but again I don't really know which is the correct approach. 😁

New clean dashboard, recreated from scratch:

views:
  - title: Home
    cards:
      - type: custom:room-card
        title: Kitchen
        entity: binary_sensor.area_kitchen
        icon: hue:room-kitchen
        state_color: true
        show_state: true
        show_icon: true
        column: false
        rows:
          - entities:
              - entity: light.kitchen_light
                name: Light
                icon: hue:pendant-cher
                state_color: true
                show_state: true
                show_icon: true
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info

[marcokreeft87]

Not all of these Frontend integrations are used in that View or in the Dashboard itself. That Slider card is for cover entities. I've removed it and didn't make a difference. I've created a new Dashboard and again the View can be moved to the left even though it shouldn't. Maybe we're taking the wrong approach in finding the issue, but again I don't really know which is the correct approach. 😁

New clean dashboard, recreated from scratch:

views:
  - title: Home
    cards:
      - type: custom:room-card
        title: Kitchen
        entity: binary_sensor.area_kitchen
        icon: hue:room-kitchen
        state_color: true
        show_state: true
        show_icon: true
        column: false
        rows:
          - entities:
              - entity: light.kitchen_light
                name: Light
                icon: hue:pendant-cher
                state_color: true
                show_state: true
                show_icon: true
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info

Yeah I think we are taking the wrong approach. Because clearly im not gonna be able to reproduce.. There is a new version: 1.4.0. Can you try with that? And if that doesnt help at least we are on the same version.

[Polimac]

i updated to 1.4 same issue only show_icon: true is mandatory when you set icon

[marcokreeft87]

i updated to 1.4 same issue only show_icon: true is mandatory when you set icon

Yes thats in the release notes..

[mihsu81]

The issue continues in v1.4

[marcokreeft87]

I really can't reproduce. Sorry, but I think it's something with your settings or other themes/cards that you installed.

Let's keep the issue open, maybe someone else has this problem and can help us by giving new info

[RadioLed2000]

I have the same issue. This happens when I use rows option.

This config has no problems:

title: TEST1
entity: switch.hall_light
show_icon: true
state_color: true
tap_action:
  action: toggle
info_entities:
  - entity: sensor.bedroom_sensor_temperature
    format: precision1
  - entity: sensor.bedroom_sensor_humidity
    format: precision0
entities:
  - entity: switch.hall_lamp1
    name: lamp1
    state_color: true
    tap_action:
      action: toggle
  - entity: switch.hall_lamp2
    name: lamp2
    state_color: true
    tap_action:
      action: toggle

But the following config has horisontal scrolling:

title: TEST2
entity: switch.hall_light
show_icon: true
state_color: true
tap_action:
  action: toggle
info_entities:
  - entity: sensor.bedroom_sensor_temperature
    format: precision1
  - entity: sensor.bedroom_sensor_humidity
    format: precision0
rows:
  - entities:
      - entity: switch.hall_lamp1
        name: lamp1
        state_color: true
        tap_action:
          action: toggle
      - entity: switch.hall_lamp2
        name: lamp2
        state_color: true
        tap_action:
          action: toggle

Home Assistant 2022.9.6, default theme, android mobile app, each test card is on it's own tab

[hugalafutro]

I can confirm this is tied to using the rows: option on my OnePLus 6T, Android 11, with default dark theme on HA 2022.9.7.

As the poster above, easily reproduced by removing rows: from my card and re-adding it. Hopefully the author is able to reproduce it with this.

[marcokreeft87]

title: TEST2 entity: switch.hall_light show_icon: true state_color: true tap_action: action: toggle info_entities:

• entity: sensor.bedroom_sensor_temperature format: precision1
• entity: sensor.bedroom_sensor_humidity format: precision0 rows:
• entities:
  • entity: switch.hall_lamp1 name: lamp1 state_color: true tap_action: action: toggle
  • entity: switch.hall_lamp2 name: lamp2 state_color: true tap_action: action: toggle

Now I got it too! Thnx. I will try and fix it

[marcokreeft87]

Ok I was being a donut. Found the issue, new version incoming

[marcokreeft87]

v1.06.12 should fix this issue

[hugalafutro]

Can confirm 1.06.12 fixed it after force closing ha app, cleaning it's cache and reopening. Thanks for quick fix!

[marcokreeft87]