jQuery UI Widgets › Forums › Plugins › AngularJS › jQWidgets-AngularJS-jqxInput

Tagged: , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  ivailo 8 years, 8 months 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

    Keshavan
    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.