Troubleshooting Radio Button Alignment

Ali AK:
The date picker is getting cut-off in rtl mode and the radio buttons the text is sticking to the radio button, I have used padding in rtl, in the LTR there is no issues

image


Linxue Ren:
Hi, can you try to add like gap-2, it should work.


Ali AK:
tried it but still no luck


Ali AK:
{
“featured”: true,
“label_calc”: “BF.i18n(‘gsselectid’)“,
“model”: “idtype”,
“required”: true,
“styleClasses”: “flex-2 mx-4 rtl:gap-2”,
“type”: “radios”,
“values_calc”: “BF.i18n(‘gsidtypeselect’)”
},


Ali AK:
I have DM’d you the link to the page


Linxue Ren:
Hi, since you already applied rlt classes, you can add customized css in styling tab. Try

.field-radios.rtl .radio-list label input {
  margin-left: 0.25rem;
}

This will override the base css in of the snippet you are using.


Ali AK:
added the css in the styling tab still no luck


Linxue Ren:
Oh, you are adding rtl in html dir

[dir="rtl"] .field-radios .radio-list label input {
  margin-left: 0.25rem;
}

Ali AK:
yes!! now its working


Linxue Ren:
Great!