Is there a way to mix and match the Form labels to either be side-by-side, top, or bottom. I would like some fields to have the label on the top of the input area and other labels to be on the left side of the input box.
I played with it a bit further and I was able to accomplish it using the .cf-label class. My form has several hundred fields so I really didn't want to have to go through and give them all a class especially because I am already using a lot of CSS on the rest of the form. Hopefully this saves someone else a bit of time!
#q226 .cf-label {width: 38%}
#q226 .cf-small {width: 55%}
#q226 .cf-field {width: 50%}
#q226 input {text-align: right}
#q226 {width: 49%; display: inline-block}
#q227 .cf-label {width: 38%}
#q227 .cf-small {width: 55%}
#q227 .cf-field {width: 50%}
#q227 input {text-align: right}
#q227 {width: 49%; display: inline-block}
#q228 .cf-label {width: 38%}
#q228 .cf-small {width: 55%}
#q228 .cf-field {width: 50%}
#q228 input {text-align: right}
#q228 {width: 49%; display: inline-block}
#q229 .cf-label {width: 38%}
#q229 .cf-small {width: 55%}
#q229 .cf-field {width: 50%}
#q229 input {text-align: right}
#q229 {width: 49%; display: inline-block}
You can set the labels alignment as Left in the Form settings. and add "top" in the CSS class for the filed that want to use top alignment, then add following JavaScript to set the alignment to top:
$(document).ready(function () {
$('.top').removeClass('label-left');
});
Would this work in reverse to move the labels to the left by adding the "label-left" class? I've tried but it hasn't been working. I'll include the various code I've tried.
$('#q14').addClass("label-left");
$('#q14 label').addClass("label-left");
$('.test').addClass("label-left");
$('.test label').addClass("label-left");
Were you ever able to get something like this to work? I'm trying to accomplish something similar on my form.
Chelsey,
I ended up doing left labels and removing the "label-left" class from everything else. I found for some reason it didn't work the other way around for me. Hope that helps.
I would suggest using the CSS code .cf-label to get the desired results.
Tommy,
I was looking more for being able to reposition the field labels regardless of the field width. The steps I was taking was clicking on the Form Settings at the top of the form and setting the default to have the field labels appear above. I then would only like a few of the field labels to appear on the left side mainly for aesthitics.