Alignment of input text fields in angular html

Question

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

Dhananjai Pai · Accepted Answer · 2019-10-12 07:08:33Z

1

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>

answered Oct 12, 2019 at 7:08

Dhananjai Pai

6,0052 gold badges12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user12094695 Over a year ago

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

Dhananjai Pai Over a year ago

create a stackblitz or a codesandbox with the code, cannot debug css without a runtime and working example!

Dhananjai Pai Over a year ago

I cannot debug unless I know at which viewport width is this issue happening and the default styles loaded into .form-group that may be cascading your styles

varman · Accepted Answer · 2019-10-12 07:25:50Z

0

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

edited Oct 12, 2019 at 7:25

answered Oct 12, 2019 at 7:22

varman

8,9326 gold badges25 silver badges56 bronze badges

3 Comments

user12094695 Over a year ago

I just want to align the input text fields (above image shows)one by one with proper alignment..It doesn't matter about the label fields.

user12094695 Over a year ago

yeah.. \It works well... But there is no gap between two input fields (latitude and longitude).I need some gap between them.

varman Over a year ago

I have updated the fiddle using input-gap class. But we will appreciate if you try and get your job done, because this community is to encourage coders.

Collectives™ on Stack Overflow

Alignment of input text fields in angular html

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related