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 :D

Re: Labels on top

Posted: Mon Mar 26, 2018 11:38 pm
by admin
.