RTL Primeng drop-down component

Question

Is there any way to place the PrimeNG drop-down icon on left side of select?

I tried

<div class="ui-rtl" dir="rtl">
    <p-dropdown></p-dropdown>
</div>

but didn't work correctly.

Is there any other solution?

What do you mean exactly ? Because by default, the arrow icon is on the right... — Antikhippe, Mar 28 '18 at 16:29
@Antikhippe Checkout persian or arabic website or other right to left languages, In these examples you see arrow button on left side — Vala Khosravi, Mar 28 '18 at 16:34
Ok but you asked to place the icon on the right side, can you edit your question please ? — Antikhippe, Mar 28 '18 at 16:36

score 1 · Accepted Answer · answered Mar 28 '18 at 16:48

1

Have you tried to override PrimeNG CSS ?

Try this :

.ui-dropdown .ui-dropdown-label {
  padding-left: 2em;
}

.ui-dropdown .ui-dropdown-trigger {
  left: 0;
}

See Plunker

answered Mar 28 '18 at 16:48

Antikhippe

5,395
2
22
38

score 0 · Answer 2 · answered Mar 12 '19 at 09:37

You must override PrimeNG. don't use direction for .body{}

.ui-dropdown label.ui-dropdown-label
{
text-align:right;
}


body .ui-dropdown-panel .ui-dropdown-items .ui-dropdown-item, body .ui-dropdown-panel .ui-dropdown-items .ui-dropdown-item-group
{
text-align:right;
}

RTL Primeng drop-down component

2 Answers2