Move form Labels left of input fields

API & Customization Show & Tell
1

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


2

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.

3

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

 

CSS:

 

#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;
}

4

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

5

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

6

Ditto - Nice!

7

nice!

8

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

9

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.

10

Many Thanks Brad, it works perfect.