CODEWITHSUNDEEP
angular
Eurydice
Eurydice

Reputation: 8419

angular puts all my input fields on the same row

I have a component made of a form with a few fields. When my component is rendered all the fields are on the same line like showed in the picture below. I do not want to introduce <br> between the fields because in that case the fields are not aligned which produces an ugly result. Here is the component code:

<div [formGroup]="form">
    <label for="firstName">First Name</label>
    <input formControlName="firstName" id="firstName" />

    <label for="lastName">Last Name</label>
    <input formControlName="lastName" id="lastName" />

    <label for="address">Address</label>
    <input formControlName="address" type="address" id="address" />    
    
    <label for="email">Email</label>
    <input formControlName="email" type="email" id="email" />    

    <label for="phone">Phone</label>
    <input formControlName="phone" type="phone" id="phone" />    

    <label for="fare">Fare:</label>
    <select class="form-select" formControlName="fare" (change)="onSelectFare()">
        <option [value]="fare.name" *ngFor="let fare of availableFares">{{fare.name}}</option>
    </select>
</div>

and its corresponding css:

:host {
    border: 2px solid #1725e6;
    display: block;
    padding: 12px;
    margin-bottom: 12px;
  }

Would you know what is wrong with my code ?

enter image description here

Upvotes: 0

Views: 1392

Answers (3)

Alan Yu
Alan Yu

Reputation: 1542

This is not angular problem, it's about CSS properties position

It could achieve by adding css property display: block to the tag

label {
  display: block;
}

Upvotes: 2

Kiran Mistry
Kiran Mistry

Reputation: 2725

First thing you need to used some Styling and responsive frameworks like bootstrap.

You can Include bootstrap in your project with three ways

First way

with CDN (Content Delivery Network) 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" >

Second Way

with NPM package 
npm i bootstrap

Third Way

with some CSS Properties like 
display: block;

you can check bootstrap document Here

Upvotes: 0

Sophia
Sophia

Reputation: 21

I don't know if I understand what you need, but if you want the inputs to be one below the other, then try this:

<div class="row" >
    <label for="firstName">First Name</label>
    <input  id="firstName" />
</div>
    <div class="row mt-2">
    <label for="lastName">Last Name</label>
    <input  id="lastName" />

</div>

Where mt stand for margin-top. Maybe like this. enter image description here

Upvotes: 0

Related Questions