Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Form elements - from right to left

Hello there

I need to provide Arabic support on a microsite that I'm doing for a client:

http://www.nesauae.com/dev2/jobForm-uae.html

and

http://www.nesauae.com/dev2/scholarshipForm-uae.html

So, 2 problems here, one the text alignment in the select and option elements need to be right aligned. Also the second problem is that the user needs to input text from right to left. Please help!

I need to get this over to the client to approve by tomorrow, UK time.

Thank you. Reza

User Gravatar

Reza

Posted Apr 3 2014 8:24 UTC

$30


  • Assigned To rashidul
  • Solved
  • javascript
    jquery
    html
  • 696 Views

5 Replies


use css property direction: rtl; for input element

near line 349. add the new property

.golden-forms .input, 
.golden-forms .textarea{
    direction: rtl;
    height:36px;
    direction: rtl;
    color: #333;
    padding: 0 10px;
    background:#fff;
    border: 1px solid;
    border-color:#bbb;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
    -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
    -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -ms-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;    
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
} 
User Gravatar

rashidul

Posted Apr 3 2014 8:29 UTC

Solution

This didn't solve your task? Get your own custom solution.

Just set an attribute dir="rtl" on your form elements. Example:

<select id="gender" name="gender" dir="rtl">
    <option value="Your Gender">ذكر أنثى </option>
    <option value="M">ذكر</option>
    <option value="F">أنثى</option>
</select>

You can also set the attribute on the whole form or any other container:

<form dir="rtl">...</form>
User Gravatar

dpashkevich

Posted Apr 3 2014 8:34 UTC

you can add direction to html element. code below apply direction to whole HTML page.

<html dir="rtl">
User Gravatar

rashidul

Posted Apr 3 2014 8:36 UTC

Note that html5 has a dir="auto" that handles all RTL and LTR and you can have it on any element you need (div, p, input, textarea)

and you can combine this with a proper text-align and it will work well

I use this in all my applications when RTL is needed.

User Gravatar

guyisra

Posted Apr 3 2014 13:58 UTC

Thanks Guyisra. So how do you use "auto" ?

User Gravatar

Reza

Posted Apr 3 2014 14:19 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions