CODEWITHSUNDEEP
htmlcssangulartypescript
user12094695
user12094695

Reputation:

Alignment of input text fields in angular html

enter image description here enter image description here 

<div class="form-group">
    <label class="lable label-default"> Google Location</label>
    <input class="form-control" type="text" name='latitude' placeholder="latitude"
                        [(ngModel)]="tourDetails.latitude">
    <input class="form-control" type="text" name='longitude' placeholder="longitude"
                        [(ngModel)]="tourDetails.longitude">
</div>

 My Css code:

label {
  display: inline-block;
  width: 140px;
  text-align: left;
}
input {
    display: inline-block;
    width: 140px;
    text-align: left;
    }

I have my Following Output. But I want to align these input text fields one by one with same proper alignment.

Upvotes: 0

Views: 4952

Answers (2)

varman
varman

Reputation: 8894

I've done only for geo-location. But if like to get the idea of bootstrap, you can refer W3schools or Bootstrap offcial web

The working fiddle Jsfiddle

<div class="container">
   <form class="form-horizontal">
      <div class="row">
         <div class="col-xs-6">
            <label class="control-label label-default"> Google Location</label>
         </div>
         <div class="col-xs-6">
            <div class="form-group">
               <input class="form-control" type="text" name='latitude' placeholder="latitude"
               [(ngModel)]="tourDetails.latitude">
               <input class="form-control" type="text" name='longitude' placeholder="longitude"
               [(ngModel)]="tourDetails.longitude">
            </div>
         </div>
      </div>
   </form>
</div>

Update 1 As you updated the requirement, I've updated the fiddle too. So you can easily remove <div class="row"> and get your expectation

Upvotes: 0

Dhananjai Pai
Dhananjai Pai

Reputation: 6005

Share your css to properly understand the style, but I am assuming the typo lable instead of label may affect the css rules

<div class="form-group">
    <label class="label label-default"> Google Location</label>
    <input class="form-control" type="text" name='latitude' placeholder="latitude"
                        [(ngModel)]="tourDetails.latitude">
    <input class="form-control" type="text" name='longitude' placeholder="longitude"
                        [(ngModel)]="tourDetails.longitude">
</div>

Upvotes: 1

Related Questions