Hi @ner
Unfortunately there is no way to achieve that.
Are you using the plugin on a RTL language site? I have not yet done any explicit RTL support. Sorry about that.
Thanks,
Angus
@gusruss89 I use this plugin on a rtl site and would really like an option to change label direction 🙂
awesome plugin, thank you
@ner by the way,
I did manage to cusotmize it with the following css rules:
.wpcf7 {
direction: rtl;
}
#cf7md-form .mdc-textfield__label {
right: 0;
transform-origin: right top;
}
#cf7md-form .mdc-textfield {
padding-bottom: 0;
}
#cf7md-form .wpcf7-not-valid-tip {
margin-bottom: 7px;
}
#cf7md-form .mdc-textfield__label--float-above {
transform: translateY(-110%) scale(0.75, 0.75);
}
Thread Starter
ner
(@ner)
@vertigoooo, thanks! Champion! It helped to a simple form.
A form with additional field types – still a mess(https://cf7materialdesign.com/demos/all-field-types/)
Anything else to change?
@gusruss89
thank you very much for the quick answer.
Your plug-in is a great idea
And Yes, I’m using a RTL language site
@ner
hey there, glad to help..
what exactly type of fields are you having problems with?
my form has only text fields hence my solution targets those type of fields but
if you added
.wpcf7 {
direction: rtl;
}
other static elements (not like the textfield placeholder which had transform on focus) like the helper text and static labels to check boxes and switches should align right just fine
and perhaps I can take a look on your page (you need to upload it maybe to some sort of hosting) and help you fixing the alignment (maybe the theme is overriding css rules and messing with it)
Thread Starter
ner
(@ner)
@vertigoooo
Multiple choice and check box – The selection options are displayed on the right, but the labels themselves are displayed to the left
The same applies to the “I agree to the Terms & Conditions”
@gusruss89
“I’m not a robot” – not shown. The text of the short code is displayed,
Appreciate your help
@ner
Hey again, use this:
#cf7md-form .mdc-form-field > label {
margin-right:4px;
margin-left:auto;
}
#cf7md-form .mdc-form-field > .cf7md-switch-label{
margin-right:16px;
margin-left:auto;
}
this will fix label alignment
Thread Starter
ner
(@ner)
wonderful!
You did it!
Appreciate
