You are viewing limited content. For full access, please sign in.

Question

Question

Amending Radio Button Choices

Forms Laserfiche
Updated November 24, 2015
asked on November 23, 2015

In the attached image I have one Radio Button question I am looking to edit/fix with regards to its appearance.

 

I would like the distance between the question/field label and the choices greater, so that way my 'Yes' & 'No' are further to the right side of the form.

 

I have tried 'float right' code within my CSS section, however this has caused me problems with the yes and no button's switching around.

 

I have another form I am shortly going to implement the same look to and would like anyone to suggest the easiest and best way to get my desired appearance.

 

Many thanks,

 

Christian

 

 

Radio Button.JPG
Radio Button.JPG (17.7 KB)
Download
0 0

Answer

SELECTED ANSWER
replied on November 24, 2015 • Show version history

Try

.ButtonChoice span.choice:first-child {margin-left:50px !important;}

The reason for the ":first-child" selector is so both radios' move together rather than separate.

1 0

Replies

replied on November 23, 2015

I would use "margin-left".

span.choice.radio:first-child {margin-left: [number]px;}
0 0
View 3 previous replies
replied on November 23, 2015

Hi Chris,

 

Thanks for the quick response! However could you quickly explain in your code above what action I should take within my own form. I assume 'first-child' is not a code I should use in my CSS section?

 

Thanks,

 

Christian

0 0
replied on November 23, 2015 • Show version history

Yes, you would add this to your "CSS and Javascript" section of your form. "first-child" is a CSS pseudo selector to indicate you only want to apply the css to the first child element in the returned set.

0 0
replied on November 23, 2015

You can check these CSS classes or ids in Mozilla Firefox if you install Firebug addon- this allows you to select any element on a webpage and find out what its name is. 

 

You can even experiment right then and there, by adding lines or changing values in the CSS code on the right side. Let me know if you need more explanation!

0 0
replied on November 24, 2015

@Chris

 

I have tried your method and it doesn't not seem to be affecting my choice buttons? Please see my image attached and see if my coding is correct!

 

Apologies if I am making basic errors!

 

Christian

Code Not working.JPG
Code Not working.JPG (31.72 KB)
Download
0 0
replied on November 24, 2015

Try 

.ButtonChoice span.choice.radio:first-child {margin-left:50px;}

The reason for the ":first-child" selector is so it only applies the 50 pixels to the first radio button thus moving both of them at the same time without giving the radio's more separation.

SELECTED ANSWER
replied on November 24, 2015 • Show version history

Try

.ButtonChoice span.choice:first-child {margin-left:50px !important;}

The reason for the ":first-child" selector is so both radios' move together rather than separate.

1 0
replied on November 24, 2015

Chris !

 

This worked exactly how I like! My novice experience to code has been my downfall here - your method worked great!

 

Thanks,

 

Christian

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Attachments
Related Posts
Loading ...