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]