Rtl

  • 12 September 2013
  • 9 replies
  • 64 views

how to align the form right-to-left

Thanks


9 replies

Hey Nissan,

There’s no on/off switch for RTL in Unbounce but you can change your text alignment with a bit of HTML. As it’s not a built-in Unbounce feature, I can’t 100% vouch for it but this should do the trick…

I found an article explains how to enable RTL at http://www.w3.org/International/tutor… but in summary, it looks like you should just need to add this line to your page the javascript tool (choose “head” for placement):

…oh, and update the “lang” parameter to whichever language your page is in: http://www.w3schools.com/tags/ref_lan…

Let me know how it goes.

hi,
where to insert the code? if i am not wrong the editor support CSS and JS

Thanks

That’s true - but the javascript tool can be used to place metadata and such in the page’s head.

Embed that code with the javascript tool, choose “head” for placement, and you should be all set.

Hi,

tried it now:
http://unbouncepages.com/9834e8d4-153…

it isn’t working
what you think?

Hey Nissan the RTL code seem to align all elements on the page except the form field labels. My best recommendation is to hide your field labels then use text boxes to label the form fields instead. That way you can position the form field labels where ever they need to be. Sorry I don’t have a better solution here but someone from the community may be able to chime in.

Thanks Ryan.

I think it can be done using CSS… is it possible to ask one of the developers?

Thanks for your help

Just a quick update with a sample page with some custom CSS for RTL form fields and labels. Hopefully this can help some of you.

http://unbouncepages.com/rtl-text/

It’s achieved by including a fairly small bit of CSS in the custom CSS area:

<style> <br />
form input, <br />
form textarea, <br />
form select, <br />
form select option{ <br />
  direction:rtl;
<br />
  left:0 !important; <br />
} <br />
div.lp-pom-root .lp-pom-form-field label { <br />
  right:0; <br />
  left:auto; <br />
  text-align:left; <br />
} <br /> </style>   

Hi
I tried including this CSS in the custom CSS area but it’s not working.
please help

Userlevel 3

Hey Yoav - Sorry for the late reply here.

I took a look at your account and reviewed your pages. You appear to have the script placed correctly. Keep in mind that it doesn’t render the field labels to the right within the page builder as this is custom CSS. To see the CSS in action view the page in ‘preview’.

Also keep in mind this takes in account the Label alignment. If you have your label align set to ‘top’, this script will move the label to the ‘top right’. If you set you label align to ‘left’, the script will align the label to the right of the actual field itself.

http://screencast.com/t/ZQyQdmygk

That said, from your page concept you have on your page it looks like you may be trying to align the fields itself horizontally. In this case you could use the script below to achieve this:

https://gist.github.com/markwainwrigh…

Hope this helps! If you run into further issues shoot an email to support@unbounce.com and we’ll take a closer look.

Reply