[Resolved] rotate the Radio field horizontally

[Author]

Posts

[massimoS527]

I can not rotate the "Radio" field like in the picture
which CSS code I should use. I'm not an expert

thank you

[Luo Yang]

Dear Massimo,

It needs custom CSS codes, and depends on how do you setup the radio fields,
Here are some example codes for style the radio fields:
vertical Radio Button Group:
https://stackoverflow.com/questions/12175483/how-to-create-vertical-radio-button-group-in-html-form-without-table-tag
horizontally radio:
https://stackoverflow.com/questions/19014766/how-can-i-get-input-radio-elements-to-horizontally-align

If you still need assistance for it, please provide a live problem URL, I need to test and debug it, thanks

[massimoS527]

do you create an admin user? so can you see?

thanks

[Luo Yang]

No , I can not create admin user for you.

Can you provide the live problem URL here? Do you need I enable the private message box for you?

[massimoS527]

Do you need I enable the private message box for you? YES
I create an Admin for you

[Luo Yang]

OK, I just enabled the private message box, please provide the credentials of your website, and point out the problem page URL, where and how can I see the radio fields

[Luo Yang]

Thanks for the details, I suggest you try below CSS codes:

.wpt-form-set-radios-wpcf-layout-ricordo li.wpt-form-item-radio{
	display:inline-block;
}

More help:
hidden link

[massimoS527]

Hi Luo and thanks for the help,
it's almost fine .... it must be as shown in the picture
I do not know how to rotate it!

thank you

[Luo Yang]

It needs custom CSS codes + JS codes, according to our support policy, we don't provide custom codes support
https://toolset.com/toolset-support-policy/

but I can make an example in your website, here are detail steps:
1) edit the layout "modifica creatura", change the CRED form cell width to 6 columns:
hidden link

2) Edit the CRED form "modifica creatura"
hidden link
In section "JS editor", add below codes:

(function($) {
	$('.wpt-form-set-radios-wpcf-layout-ricordo input').each(function(){
    	$(this).parent('li').append(this);
    });
})(jQuery);

3) Modify the CSS codes as below:
hidden link

.wpt-form-set-radios-wpcf-layout-ricordo li.wpt-form-item-radio{
    display:inline-block;
}
.wpt-form-set-radios-wpcf-layout-ricordo input[type="radio"].radio{
    margin-left: 40px;
}

Please test again, check if it is what you need.

[massimoS527]

sorry Luo, I did not know I asked wrong.
what you did is great ....
I wanted to know which Css entry controls the writings on the radio button.
I arrange myself to enter the values.

thanks 100000000

[Luo Yang]

This one is for radio button:

.wpt-form-set-radios-wpcf-layout-ricordo input[type="radio"].radio{
 /* put your custom CSS codes here */
}

[massimoS527]

I'm sorry, I can not figure out what to add.
thank you !!!!

[Luo Yang]

It is a new question, I assume the original question has resolved:
https://toolset.com/forums/topic/rotate-the-radio-field-horizontally/#post-604800

Please create new thread for the new questions, that will help other users to find the answers. thanks

[massimoS527]

Hello,
I think a user can find everything in this post, but if it also serves to help others I open a new thread.

thank you
Maximum