Page 1 of 1
Labels on top
Posted: Fri Mar 23, 2018 10:51 pm
by Timo
I'm designing a form that has text fields with longer labels and the text fields are not visible without scrolling on a mobile phone. Can same label placements be changed so that field labels are displayed to the top of the field instead?
Re: Labels on top
Posted: Sat Mar 24, 2018 7:37 am
by admin
Timo,
I don't understand what you mean.
Steven
Re: Labels on top
Posted: Sat Mar 24, 2018 8:11 am
by toms
Hi,
I use this helper function to place a label on top of a field.
Code: Select all
jQuery.fn.cssNumber = function(prop){
var v = parseInt(this.css(prop),10);
return isNaN(v) ? 0 : v;
};
Code: Select all
function custFieldLabelOnTop(f) {
var t = $('#' + f).cssNumber("top");
var l = $('#' + f).cssNumber("left");
$('#' + 'label_' + f).css({'top': t-20, 'left' : l-13})
}
Example:
Code: Select all
custFieldLabelOnTop('yourfieldid');
label_on_top.png
Re: Labels on top
Posted: Sat Mar 24, 2018 10:09 am
by toms
This is an improved version of my function: It sets the labels of all fields of a form on top. It also allows you to exclude some fields (2nd parameter)
Code: Select all
function custFieldLabelsOnTop(f, e) {
for (var i = 0; i < f.length; i++) {
if (jQuery.inArray(f[i], e) == -1) {
var t = $('#' + f[i]).cssNumber("top");
var l = $('#' + f[i]).cssNumber("left");
$('#' + 'label_' + f[i]).css({
'top': t - 18,
'left': l - 15
})
}
}
}
Code: Select all
var f = nuSubformObject("").fields; // include all fields
var e = ["cust_company", "cust_id"]; // but exclude these fields
custFieldLabelsOnTop(f, e);
Re: Labels on top
Posted: Mon Mar 26, 2018 2:15 pm
by Timo
Amazing! This is exactly what I was looking for

Re: Labels on top
Posted: Mon Mar 26, 2018 11:38 pm
by admin
.