Labels on top

[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?

[admin]

Timo,

I don't understand what you mean.

Steven

[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

[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);

[Timo]

Amazing! This is exactly what I was looking for

[admin]

.