Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Card moving left and right on small device #48

Open
storebatfar opened this issue Apr 25, 2023 · 14 comments
Open

Card moving left and right on small device #48

storebatfar opened this issue Apr 25, 2023 · 14 comments

Comments

@storebatfar
Copy link

storebatfar commented Apr 25, 2023 •
edited
Loading

The issue started with the update of HA 2023.4.
When the charger card setting is set to eg. Easee, the card is moving to the sides, when scrolling on small device.
I am not having the issue with any other custom cards.
I hope the attached images helps ilustrate the issue.
File (2)
@storebatfar storebatfar changed the title card moving left and right on small device Card moving left and right on small device Apr 25, 2023
@tmjo
Copy link
Owner

tmjo commented Apr 25, 2023

Sounds strange. What type of device are you on? I'm not seeing this on my cell phone.

Could you post the yaml config of your dashboard to see if there can be anything in particular? Or try to add a brand new dashboard with the charger card only for testing (can be deleted after test if you want), just to figure out if there is something in the context that makes this happen.

@storebatfar
Copy link
Author

storebatfar commented Apr 25, 2023 •
edited
Loading

@tmjo Thanks for your reply.
I have created a blank dashboard, which has the following YAML config. I still have the same issue. I have the same issue on iPhone X, iPhone 13 and 14.

views:
  - title: Home
    type: custom:vertical-layout
    badges: []
    cards:
      - type: custom:charger-card
        entity: sensor.johansen_current
        brand: easee
        show_leds: true
        details:
          name:
            entity_id: sensor.johansen_current_status
            attribute: name
          location:
            entity_id: sensor.johansen_current_status
            attribute: site_name
          status:
            entity_id: sensor.johansen_current_status
          substatus:
            entity_id: sensor.johansen_current_reason_for_no_current
          smartcharging:
            entity_id: switch.johansen_current_smart_charging
          currentlimits:
            - 0
            - 6
            - 10
            - 16
            - 20
            - 25
            - 32
          statetext:
            disconnected: disconnected
            awaiting_start: awaiting_start
            charging: charging
            completed: completed
            error: error
            ready_to_charge: ready_to_charge
          collapsiblebuttons:
            group1:
              text: click_for_group1
              icon: mdi:speedometer
            group2:
              text: click_for_group2
              icon: mdi:information
            group3:
              text: click_for_group3
              icon: mdi:cog
          info_left:
            - entity_id: binary_sensor.johansen_current_online
              text: online
          info_right:
            - entity_id: sensor.johansen_current_voltage
              text: voltage
              unit_show: true
            - entity_id: sensor.johansen_current_power
              text: power
              unit_show: true
          group1:
            - entity_id: sensor.johansen_current_dynamic_charger_limit
              text: dyn_charger_limit
              service: easee.set_charger_dynamic_limit
              service_data:
                device_id: b1dce7dac180fb8a0a92ca9d49d025e0
                current: '#SERVICEVAL#'
            - entity_id: sensor.johansen_current_dynamic_circuit_limit
              text: dyn_circuit_limit
              service: easee.set_circuit_dynamic_limit
              service_data:
                device_id: b1dce7dac180fb8a0a92ca9d49d025e0
                currentP1: '#SERVICEVAL#'
            - entity_id: sensor.johansen_current_max_charger_limit
              text: max_charger_limit
              service: easee.set_charger_max_limit
              service_data:
                device_id: b1dce7dac180fb8a0a92ca9d49d025e0
                current: '#SERVICEVAL#'
            - entity_id: sensor.johansen_current_max_circuit_limit
              text: max_circuit_limit
              service: easee.set_circuit_max_limit
              service_data:
                device_id: b1dce7dac180fb8a0a92ca9d49d025e0
                currentP1: '#SERVICEVAL#'
            - entity_id: sensor.johansen_current_offline_circuit_limit
              text: offline_circuit_limit
              service: easee.set_circuit_offline_limit
              service_data:
                device_id: b1dce7dac180fb8a0a92ca9d49d025e0
                currentP1: '#SERVICEVAL#'
          group2:
            - entity_id: binary_sensor.johansen_current_online
              text: online
            - entity_id: sensor.johansen_current_voltage
              text: voltage
              unit_show: true
            - entity_id: sensor.johansen_current_power
              text: power
              unit_show: true
            - entity_id: sensor.johansen_current_current
              text: charger_current
              unit_show: true
            - entity_id: sensor.johansen_current_circuit_current
              text: circuit_current
              unit_show: true
            - entity_id: sensor.johansen_current_energy_per_hour
              text: energy_per_hour
              unit_show: true
            - entity_id: sensor.johansen_current_session_energy
              text: session_energy
              unit_show: true
            - entity_id: sensor.johansen_current_lifetime_energy
              text: lifetime_energy
              unit_show: true
          group3:
            - entity_id: switch.johansen_current_is_enabled
              text: enabled
            - entity_id: switch.johansen_current_enable_idle_current
              text: idle_current
            - entity_id: binary_sensor.johansen_current_cable_locked
              text: cable_locked
            - entity_id: switch.johansen_current_cable_locked_permanently
              text: perm_cable_locked
            - entity_id: switch.johansen_current_smart_charging
              text: smart_charging
            - entity_id: sensor.johansen_current_cost_per_kwh
              text: cost_per_kwh
            - entity_id: binary_sensor.johansen_current_update_available
              text: update_available
            - entity_id: binary_sensor.johansen_current_basic_schedule
              text: schedule
          stats:
            default:
              - entity_id: sensor.johansen_current_session_energy
                text: session_energy
                unit_show: true
              - entity_id: switch.johansen_current_cable_locked_permanently
                text: cable_locked
              - entity_id: binary_sensor.johansen_current_basic_schedule
                text: schedule
            disconnected:
              - entity_id: sensor.johansen_current_session_energy
                text: session_energy
                unit_show: true
              - entity_id: switch.johansen_current_cable_locked_permanently
                text: cable_locked
              - entity_id: calculated
                text: used_limit
                unit: A
                unit_show: true
                calc_function: min
                calc_entities:
                  - entity_id: sensor.johansen_current_dynamic_charger_limit
                  - entity_id: sensor.johansen_current_dynamic_circuit_limit
                  - entity_id: sensor.johansen_current_max_charger_limit
                  - entity_id: sensor.johansen_current_max_circuit_limit
                  - entity_id: sensor.johansen_current_offline_circuit_limit
            awaiting_start:
              - entity_id: sensor.johansen_current_session_energy
                text: session_energy
                unit_show: true
              - entity_id: binary_sensor.johansen_current_basic_schedule
                text: schedule
              - entity_id: switch.johansen_current_smart_charging
                text: smart_charging
              - entity_id: calculated
                text: used_limit
                unit: A
                unit_show: true
                calc_function: min
                calc_entities:
                  - entity_id: sensor.johansen_current_dynamic_charger_limit
                  - entity_id: sensor.johansen_current_dynamic_circuit_limit
                  - entity_id: sensor.johansen_current_max_charger_limit
                  - entity_id: sensor.johansen_current_max_circuit_limit
                  - entity_id: sensor.johansen_current_offline_circuit_limit
            charging:
              - entity_id: sensor.johansen_current_session_energy
                text: session_energy
                unit_show: true
              - entity_id: sensor.johansen_current_energy_per_hour
                text: energy_per_hour
                unit_show: true
              - entity_id: sensor.johansen_current_circuit_current
                text: circuit_current
                unit_show: true
              - entity_id: sensor.johansen_current_output_limit
                text: output_limit
                unit_show: true
              - entity_id: sensor.johansen_current_current
                text: current
                unit_show: true
              - entity_id: sensor.johansen_current_power
                text: power
                unit_show: true
            completed:
              - entity_id: sensor.johansen_current_session_energy
                text: session_energy
                unit_show: true
              - entity_id: binary_sensor.johansen_current_basic_schedule
                text: schedule
              - entity_id: calculated
                text: used_limit
                unit: A
                unit_show: true
                calc_function: min
                calc_entities:
                  - entity_id: sensor.johansen_current_dynamic_charger_limit
                  - entity_id: sensor.johansen_current_dynamic_circuit_limit
                  - entity_id: sensor.johansen_current_max_charger_limit
                  - entity_id: sensor.johansen_current_max_circuit_limit
                  - entity_id: sensor.johansen_current_offline_circuit_limit
            error:
              - entity_id: sensor.johansen_current_session_energy
                text: session_energy
                unit_show: true
              - entity_id: binary_sensor.johansen_current_basic_schedule
                text: schedule
            ready_to_charge:
              - entity_id: sensor.johansen_current_session_energy
                text: session_energy
                unit_show: true
              - entity_id: binary_sensor.johansen_current_basic_schedule
                text: schedule
              - entity_id: calculated
                text: used_limit
                unit: A
                unit_show: true
                calc_function: min
                calc_entities:
                  - entity_id: sensor.johansen_current_dynamic_charger_limit
                  - entity_id: sensor.johansen_current_dynamic_circuit_limit
                  - entity_id: sensor.johansen_current_max_charger_limit
                  - entity_id: sensor.johansen_current_max_circuit_limit
                  - entity_id: sensor.johansen_current_offline_circuit_limit
          toolbar_left:
            default: []
            disconnected: []
            awaiting_start:
              - service: easee.action_command
                service_data:
                  device_id: b1dce7dac180fb8a0a92ca9d49d025e0
                  action_command: stop
                text: stop
                icon: hass:stop
              - service: easee.action_command
                service_data:
                  device_id: b1dce7dac180fb8a0a92ca9d49d025e0
                  action_command: resume
                text: resume
                icon: hass:play
              - service: easee.action_command
                service_data:
                  device_id: b1dce7dac180fb8a0a92ca9d49d025e0
                  action_command: override_schedule
                text: override
                icon: hass:motion-play
            charging:
              - service: easee.action_command
                service_data:
                  device_id: b1dce7dac180fb8a0a92ca9d49d025e0
                  action_command: stop
                text: stop
                icon: hass:stop
              - service: easee.action_command
                service_data:
                  device_id: b1dce7dac180fb8a0a92ca9d49d025e0
                  action_command: pause
                text: pause
                icon: hass:pause
            completed:
              - service: easee.action_command
                service_data:
                  device_id: b1dce7dac180fb8a0a92ca9d49d025e0
                  action_command: stop
                text: stop
                icon: hass:stop
              - service: easee.action_command
                service_data:
                  device_id: b1dce7dac180fb8a0a92ca9d49d025e0
                  action_command: override_schedule
                text: override
                icon: hass:motion-play
            error:
              - service: easee.action_command
                service_data:
                  device_id: b1dce7dac180fb8a0a92ca9d49d025e0
                  action_command: reboot
                text: reboot
                icon: hass:restart
            ready_to_charge:
              - service: easee.action_command
                service_data:
                  device_id: b1dce7dac180fb8a0a92ca9d49d025e0
                  action_command: stop
                text: stop
                icon: hass:stop
              - service: easee.action_command
                service_data:
                  device_id: b1dce7dac180fb8a0a92ca9d49d025e0
                  action_command: override_schedule
                text: override
                icon: hass:motion-play
          toolbar_right:
            default:
              - service: persistent_notification.create
                service_data:
                  message: >-
                    Firmware update is available, but only possible when
                    disconnected!
                  title: Update
                text: update
                icon: mdi:file-download
                conditional_entity: binary_sensor.johansen_current_update_available
            disconnected:
              - service: easee.action_command
                service_data:
                  device_id: b1dce7dac180fb8a0a92ca9d49d025e0
                  action_command: update_firmware
                text: update
                icon: mdi:file-download
                conditional_entity: binary_sensor.johansen_current_update_available
        chargerImage: White
        customCardTheme: theme_transp_white

@storebatfar
Copy link
Author

If I only set the charger entity, then I have no issues. It starts as soon as I set the charger brand.

This simple Yaml config works.

views:
  - title: Home
    type: custom:vertical-layout
    badges: []
    cards:
      - type: custom:charger-card
        entity: sensor.johansen_current

@tmjo
Copy link
Owner

tmjo commented Apr 25, 2023

Hmm. I'm guessing it may be some overflow due to "large" values. Could you test replacing info_left and info_right with the below code (rounds numbers to zero decimals like I believe it was previously)?

If it doesn't work, see if it helps to temporarily remove both sections below instead. If that helps, try to add one by one and see which one is the bad guy.

          info_left:
            - entity_id: binary_sensor.johansen_current_online
              text: online
              round: 0

          info_right:
            - entity_id: sensor.johansen_current_voltage
              text: voltage
              unit_show: true
              round: 0
            - entity_id: sensor.johansen_current_power
              text: power
              unit_show: true
              round: 0

@storebatfar
Copy link
Author

Thanks for the steps to try out. I have followed the sugested steps, but unfortunately these did not solve the issue.

@storebatfar
Copy link
Author

storebatfar commented Apr 25, 2023 •
edited
Loading

I think it might be related to the sections toolbar_right and toolbar_left.
When I delete these and info_left and info_right, it seems like it's working as before HA update 2023.4

@tmjo
Copy link
Owner

tmjo commented Apr 25, 2023

Ok. Are you using the toolbar or is it turned off? I couldn't see it in your screenshot, so perhaps that may be a thing?

@tmjo
Copy link
Owner

tmjo commented Jul 24, 2023

Do you still see this issue?

@storebatfar
Copy link
Author

Do you still see this issue?

Yes, this is still an issue.

@TyzzyT
Copy link

TyzzyT commented Aug 17, 2023 •
edited
Loading

I'm not using the toolbar, and only using info_right.
My config is like below. When I set round: 0 it doesn't work, when I remove the info_right section it's solved.

  info_right:
    - entity_id: sensor.wallbox_portal_energy_price
      text: Price per kWh
      unit_show: true
      unit: €/kWh
      round: 2
    - entity_id: number.wallbox_portal_max_charging_current
      text: Power (Amps)
      unit_show: true
      unit: A
      round: 0

@tmjo
Copy link
Owner

tmjo commented Aug 19, 2023

@TyzzyT; this was not clear for me. What doesn't work? The rounding itself or does your card move like the subject in this issue?

@TyzzyT
Copy link

TyzzyT commented Aug 21, 2023

@tmjo Sorry for not being clear, now that I read it again it's not very clear 😨
But my problem is the same as the subject in this issue, dashboard moving left/right on my iPhone SE

@Kdonkers
Copy link

Kdonkers commented Aug 2, 2024

Had the same issue, disabling the info_right section fixed it.

@thilemann
Copy link

thilemann commented Aug 14, 2024 •
edited
Loading

This is related to the tooltips inside the infoitems and infoitems-left classes overflowing. Removing the .tooltiptext-right span resolves the issue. An option for disabling the tooltips would be neat. But if you still want the tooltips, another solution could be to show them inside the card (by changing their alignment) to avoid their text overflowing.

EDIT: I installed the lovelace-card-mod and added this at the bottom of the card to remove the tooltips:
card_mod:
style: |
span.tooltiptext-right {
display: none;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@Kdonkers @thilemann @tmjo @TyzzyT @storebatfar