Hello,
I am having an issue with RTL form, specifically with the <select> item. I have managed to make all labels and inputs to be RTL, except for the <select> , where the drop down will appear on top of its label. I have spent hours trying to make it appear left of the label.
Here is how it looks:
And after hours I managed to make it like this:
As you can see I have managed to make it to the left of the label but the arrow is on top of the label!
This tiny form is driving me crazy.
Here is my HTML:
<div class="list list-inset">
<form name="registrationForm" class="parent">
<div class="item item-divider">
المعلومات الشخصية
</div>
<label class="item item-input">
<span class="input-label">الإسم</span>
<input type="text" name="nameInput" ng-model="newUser.first_name" required>
</label>
<label class="item item-input">
<span class="input-label">الإيميل</span>
<input class="emailinput" type="email" name="emailInput" ng-model="newUser.email" required>
</label>
<label class="item item-input item-select">
<span class="input-label">المدينة</span>
<select ng-model="newUser.billing_address.state" name="cityInput" ng-init="newUser.billing_address.state='الرياض'" required>
<option>الرياض</option>
<option>جدة</option>
<option>الدمام</option>
</select>
</label>
</div>
This is the CSS for the first case:
.parent {
direction: rtl;
text-align: right;
}
.parent span{
direction: ltr;
}
This is the CSS I added and made it looks like the 2nd image:
.item-select select
{
right: auto;
top: 0px;
width: 350px;
direction: rtl;
}
Any idea is appreciated. Thanks!
