Card-mod-theme to edit Alarm Panel Keypad

Configuration Frontend
1

Hello everyone,
I want to add to the theme card-mod to modify the alarm-panel.
All I want is to add a CSS value of direction: ltr to the #keypad.
My language is right-to-left, and this creates a “mirror” effect on the keypad.

The reason I want to add this globally and not per card is because the keypad opens in a ha-dialog, and I don’t have a way to modify it individually…

I’ve been struggling with this for a few days and can’t figure it out.
I’d really appreciate any help, friends. Thanks in advance! :slight_smile:

2

Does this work outside a theme?

In addition, please post a subset of your theme to include the initial code ad the alarm card mod code.

type: alarm-panel
states:
  - arm_home
  - arm_away
entity: alarm_control_panel.your_alarm
card_mod:
 style: |
  .keypad {
    gap: 40px !important;
    background: #333333;
    border: 2px solid lime;
    border-radius: 40px;
    direction: ltr;
      }

An example reversing the keypad numbers

image
image1030×1072 37.4 KB

3

If the keypad being mirrored is incorrect when you’re in RTL language, you can always open a github issue for it to get it addressed in the release code.

Not many people really know the rules for RTL and things get mixed up sometimes, but it’s probably not a difficult fix. It looks like it had been forced to LTR at least once in the past, though I don’t know if that got lost along the way.

4

Agreed! Card_Mod is overkill as a resolution and it should be a simple fix based on logic applied based on the associated language. This has come up on a few 3rd party cards in the past.

5

I am not sure that RTL keypads should have a mirrored look like shown here.
Out of curiosity, changed in my iPhone a language to Hebrew, a keypad in Calculator did not change. Of course, this cannot be considered as a proof that keypads should not be mirrored.
Anyway, there was a fix from a person who contributes a lot for RTL-users and in one of his PR a direction was fixed as “LTR” (although later this line was removed…), probably he knows what is a correct look?

(if anyone wants to change it, add smth like this into “hui-alarm-panel-card” card & “dialog-enter-code” element for a “keypad” part:
style=${computeRTLDirection(this.hass)}
)

1 Like
6

I sent a bug report over a week ago and there’s been no response at all.
The keypad is supposed to be like everywhere else - 1 on the left and 3 on the right.
Numbers always start on the left side, no matter what the language is.

7

Ok thanks for opening that, didn’t notice that you had previously done it.

This should fix: https://github.com/home-assistant/frontend/pull/27588

1 Like
8

Wow thank you for the fast response mate, appreciate that!