Move form Labels left of input fields

Add this to your CSS: 

#view_100 .knack-input-label {display: inline-block !Important; width: 100px; float: left !Important;}
#view_100 .input {display: inline-block !Important;}
/* Fix for radio lists */
  #view_100 .kn-input-multiple_choice label.option + label.option {padding-left: 100px !Important;}
/* Fix for rich text  */
  #view_100 .redactor-box {display: inline-block !Important;}

Remove '#view_100' to work on all forms

I have a requirement to move multiple choice labels to the left. I am really new to Knack  but learning really quickly, dont have much experience with CSS either. 

I cut and pasted the above code into the Setting\embedded\code section and done a number of refreshes and it made no differences to my forms. Am i suppose to modify the above code to match specific field(s) ? I have about 150 -200 multiple choice fields, so i am hoping the code would apply to all multiple choice fields in my forms.

Any assistance would be most appreciated.

I found this to work on the latest theme and to specify an individual field.




#view_xxx #kn-input-field_yyy .kn-label {
display: inline-block !Important;
width: 50% !important;
float: left !Important

#view_xxx #kn-input-field_yyy .input {
display: inline-block !Important;
width: 50% !important;

Looks nice, but no longer seems to work?  What changes are required to work with Knack Standard theme?

Thanks Brad! Is there any way to make this specific to one field?

Ditto - Nice!


Hi, Is there any update about this topic. seems that is not working due to this part “float: left !Important”.
many thanks.

Hey @Pablo1 using this css now for a form:

/* labels left */
#view_123 .kn-input {display: flex;}

/* pad the label to pull it down a little, and set all labels same width */
#view_123 .kn-input label {padding-top:8px; min-width:80px;}

Alter the numbers to suit your needs.

Many Thanks Brad, it works perfect.