Dropdown RTL Visual Bugs
Closed this issue · 1 comments
Nerwyn commented
Checklist:
- I updated to the latest version available
- I cleared the cache of my browser
- I have confirmed that this is an issue with this project and not an integration by making the same actions with the actions dev tool
Release with the issue:
4.2.0
Last working release (if known):
NA
Browser and Operating System:
Windows 11 / Brave
Description of problem:
Dropdown RTL display bugs
- Arrow is on wrong side
- Dropdown menu should be offset from right, not left.
Javascript errors shown in the web inspector (if applicable):
NA
Your Full Card Config
features:
- type: custom:service-call
entries:
- type: dropdown
entity_id: input_select.select_test
options:
- entity_id: input_select.select_test
option: A
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: A
target:
entity_id: input_select.select_test
label: Foo
icon: mdi:alpha-a-circle
styles: |-
.icon {
color: var(--green-color);
}
- entity_id: input_select.select_test
option: B
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: B
target:
entity_id: input_select.select_test
label: Bar
icon: mdi:alpha-b-circle
styles: |-
.icon {
color: var(--red-color);
}
- entity_id: input_select.select_test
option: C
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: C
target:
entity_id: input_select.select_test
label: Baz
icon: mdi:alpha-c-circle
styles: |-
.icon {
color: var(--yellow-color);
}
- entity_id: input_select.select_test
option: D
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: D
target:
entity_id: input_select.select_test
- entity_id: input_select.select_test
option: E
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: E
target:
entity_id: input_select.select_test
- entity_id: input_select.select_test
option: F
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: F
target:
entity_id: input_select.select_test
- entity_id: input_select.select_test
option: G
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: G
target:
entity_id: input_select.select_test
- entity_id: input_select.select_test
option: H
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: H
target:
entity_id: input_select.select_test
- entity_id: input_select.select_test
option: I
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: I
target:
entity_id: input_select.select_test
- entity_id: input_select.select_test
option: J
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: J
target:
entity_id: input_select.select_test
- entity_id: input_select.select_test
option: K
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: K
target:
entity_id: input_select.select_test
- entity_id: input_select.select_test
option: L
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: L
target:
entity_id: input_select.select_test
- entity_id: input_select.select_test
option: M
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: M
target:
entity_id: input_select.select_test
- entity_id: input_select.select_test
option: "N"
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: "N"
target:
entity_id: input_select.select_test
- entity_id: input_select.select_test
option: O
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: O
target:
entity_id: input_select.select_test
- entity_id: input_select.select_test
option: P
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: P
target:
entity_id: input_select.select_test
- entity_id: input_select.select_test
option: Q
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: Q
target:
entity_id: input_select.select_test
- entity_id: input_select.select_test
option: R
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: R
target:
entity_id: input_select.select_test
- entity_id: input_select.select_test
option: S
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: S
target:
entity_id: input_select.select_test
- entity_id: input_select.select_test
option: T
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: T
target:
entity_id: input_select.select_test
- entity_id: input_select.select_test
option: U
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: U
target:
entity_id: input_select.select_test
- entity_id: input_select.select_test
option: V
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: V
target:
entity_id: input_select.select_test
- entity_id: input_select.select_test
option: W
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: W
target:
entity_id: input_select.select_test
- entity_id: input_select.select_test
option: X
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: X
target:
entity_id: input_select.select_test
- entity_id: input_select.select_test
option: "Y"
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: "Y"
target:
entity_id: input_select.select_test
- entity_id: input_select.select_test
option: Z
tap_action:
action: perform-action
perform_action: input_select.select_option
data:
option: Z
target:
entity_id: input_select.select_test
styles: |-
:host {
flex-basis: 400%;
}
- type: dropdown
entity_id: light.sunroom_ceiling
options:
- entity_id: light.sunroom_ceiling
option: 255,166,87
tap_action:
action: perform-action
perform_action: light.turn_on
target:
entity_id: light.sunroom_ceiling
data:
brightness_pct: 100
kelvin: 2000
icon: mdi:checkbox-blank-circle
styles: |-
.icon {
color: rgb(255,166,87);
}
- entity_id: light.sunroom_ceiling
option: 255,0,0
tap_action:
action: perform-action
perform_action: light.turn_on
target:
entity_id:
- light.sunroom_ceiling
data:
rgb_color:
- 255
- 0
- 0
brightness_pct: 100
icon: mdi:checkbox-blank-circle
styles: |-
.icon {
color: var(--red-color);
}
- entity_id: light.sunroom_ceiling
option: 0,255,0
tap_action:
action: perform-action
perform_action: light.turn_on
target:
entity_id:
- light.sunroom_ceiling
data:
rgb_color:
- 0
- 255
- 0
brightness_pct: 100
icon: mdi:checkbox-blank-circle
styles: |-
.icon {
color: var(--green-color);
}
- entity_id: light.sunroom_ceiling
option: 0,0,255
tap_action:
action: perform-action
perform_action: light.turn_on
target:
entity_id:
- light.sunroom_ceiling
data:
rgb_color:
- 0
- 0
- 255
brightness_pct: 100
icon: mdi:checkbox-blank-circle
styles: |-
.icon {
color: var(--blue-color);
}
- entity_id: light.sunroom_ceiling
option: 128,0,128
tap_action:
action: perform-action
perform_action: light.turn_on
target:
entity_id:
- light.sunroom_ceiling
data:
rgb_color:
- 128
- 0
- 128
brightness_pct: 100
icon: mdi:checkbox-blank-circle
styles: |-
.icon {
color: var(--purple-color);
}
- entity_id: light.sunroom_ceiling
tap_action:
action: perform-action
perform_action: light.turn_off
target:
entity_id:
- light.sunroom_ceiling
data: {}
icon: mdi:checkbox-blank-circle-outline
styles: ""
option: "off"
value_attribute: "{{- \"rgb_color\" if is_state(config.entity, \"on\") else \"state\" }}"
styles: |-
.option {
min-width: 0;
}
styles: ""
type: tile
entity: input_select.select_test
grid_options:
columns: 12
rows: 1
name: Dropdowns?
icon: mdi:form-dropdown
color: greenAdditional information:
There is already some rtl detection logic that can be used to correct this.