How do I style multi-choice fields to display as row (horizontal) rather than vertical?

Ask the Community Get Answers
1

Hi,

I would really like to be able to display multiple choice options in a horizontal row rather than their default of  vertical. 

For example:

Please select your toppings:

 X Bacon X Lettuce X Tomato X Onion X Cheese

rather than:

Please select your toppings:

X Bacon

X Lettuce

X Tomato

X Onion 

X Cheese

As you can see the first option requires two lines of real estate where as the bottom requires six. This helps keep the page looking cleaner and everything above the fold (So you don't have to scroll down). 

Would be great to have a custom style that runs only runs on included fields.  

had a dig through the forums but couldn't see an answer to this. 

Seem like it would have popped up before so I apologise if I didn't see it.

Regards

Stu

2

I am having the same issue.  I would like to display multiple choice options in a horizontal row rather than their default value of  vertical.   

 

Where do place the below CSS code using the Knack interface?  I placed the below CSS code in the custom CSS section of the site, but it didn't change the multiple choice option orientation to horizontal. 

.kn-input-multiple_choice label.option {float: left;}


3

Stu - good work and looks good to me.  Here's some help with CSS padding http://www.w3schools.com/css/css_padding.asp

4

Thanks for the response.

This works well. 

To extend on this I have been experimenting on how to call this on a field and not a class and have had success with the below. Do you see any problems with this other than adding padding (ill work out how to do that tomorrow).

#kn-input-field_41 label.option {float: left;}


Any help really appreciated.

Thanks again

stu

5

Stu - without testing the CSS might be something like this:

.kn-input-multiple_choice label.option {float: left;}

 Might need some padding around each label.option.

6

Stu - without testing the CSS might be something like this:

.kn-input-multiple_choice label.option {float: left;}

 Might need some padding around each label.option.