Page 1 of 1

Define a fieldcontain label

Posted: Mon Jun 17, 2013 3:33 pm
by Andrés Méndez

Hello.

I would like to set the label for a form field.

I'd like to create this.

code
<div data-role="fieldcontain">
<label for="company">Company Name:<&#47;label>
<input type="text" id="company" name="company">
<&#47;div>
/code

I haven't found how to set the "label" component.

Thanks.


Define a fieldcontain label

Posted: Mon Jun 17, 2013 4:14 pm
by Kateryna Grynko

Hi Andrés,

You should use Grid component.
Image


Define a fieldcontain label

Posted: Mon Jun 17, 2013 5:28 pm
by Andrés Méndez

But that creates this:
code
<div name="mobilelabel1_37" id="j_51" dsid="mobilelabel1_37" data-role="appery_label" class='labelClass mobilelabel10 '>
/code

And I suppose that it doesn't change automatically from up to left of the form input when I load the app in an iPad, does it?


Define a fieldcontain label

Posted: Tue Jun 18, 2013 7:44 am
by Maryna Brodina

Hello! There is no Label you need in Appery.io builder, but you can use JS to change that.
1) Add Label from Components panel
2) Through More properties add attribute "for" and add Input name you want to bind that label
3) On page Show run the following code:
codefunction changeToLabel(labelName) {
var div = $("div[dsid=" + labelName + "]");
if (div&#46;length > 0) {
div = div&#46;eq(0);
var label = $('<label>');
label&#46;text(div&#46;text());
var forAttr = div&#46;attr("for");
label&#46;attr("for", Appery(forAttr)&#46;attr("id"));
label&#46;insertBefore(div);
div&#46;remove();
}
}
changeToLabel("mobilelabelName");/code

If you want to change label on several screens you can create separate JS asset.