jQWidgets Forums

Tagged: Angular input, input labels, javascript input, jqx-input

This topic contains 1 reply, has 2 voices, and was last updated by ivailo 9 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

jQWidgets-AngularJS-jqxInput Posts

March 28, 2016 at 8:57 am jQWidgets-AngularJS-jqxInput #82891

Participant

Hi,

Label alignment issue, how to align labels (Country, Name and Pincode) for each of input fields in below code while using
jqx-input directive.

Thanks,
Keshavan

<!DOCTYPE html>
<html ng-app="demoApp">
<body>
    <div>
        Country :
        <jqx-input ng-model="country" jqx-source="countries" jqx-width="200" jqx-height="25" jqx-place-holder="'Enter a Country'"></jqx-input>{{country}}
        <br /> 
        Name :
        <jqx-input ng-model="name" jqx-width="200" jqx-height="25" jqx-place-holder="'Enter Candidate Name'"></jqx-input> {{name}}
        <br /> 
        Pincode :
        <jqx-input ng-model="pincode" jqx-width="200" jqx-height="25" jqx-place-holder="'Enter Your Pincode'"></jqx-input>{{pincode}}
        <br />
    </div>
</body>
</html>

March 29, 2016 at 12:33 pm jQWidgets-AngularJS-jqxInput #82959

ivailo

Participant

Hi Keshavan,

Use div elements float:left and equal width about your labels:

<div>
            <div style="float:left; width:70px;">Country :</div>
            <jqx-input ng-model="country" jqx-source="countries" jqx-width="200" jqx-height="25" jqx-place-holder="'Enter a Country'"></jqx-input>{{country}}
            <div style="clear:both;"></div>
            <div style="float:left; width:70px;">Name :</div>
            <jqx-input ng-model="name" jqx-width="200" jqx-height="25" jqx-place-holder="'Enter Candidate Name'"></jqx-input> {{name}}
            <div style="clear:both;"></div>
            <div style="float:left; width:70px;">Pincode :</div>
            <jqx-input ng-model="pincode" jqx-width="200" jqx-height="25" jqx-place-holder="'Enter Your Pincode'"></jqx-input>{{pincode}}
</div>

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.