CODEWITHSUNDEEP
htmlcss
Vasiliy Mazhekin
Vasiliy Mazhekin

Reputation: 688

How to align elements in form?

I have a problem to aligning controls in form

enter image description here

Buttons some higher than input or select.

How to display them aligned in one line ?

The code looks like below: 

<form [formGroup]="formGroup">

  <button class="td to-left-end" (click)="toFirstPage()"></button>
  <button class="td" (click)="toPrevPage()"></button>

  <input class="td" type="text" readonly formControlName="currentPageInfo">

  <button class="td" (click)="toNextPage()"></button>
  <button class="td" (click)="toLastPage()"></button>

  <select class="td" formControlName="pageSize">
    <option *ngFor="let item of pageSizes">{{item}}</option>
  </select>

</form>

Upvotes: 0

Views: 131

Answers (4)

Gerard
Gerard

Reputation: 15786

If you don't have to support old IE browsers, I would recommend flexbox. It is responsive by default and horizontal and vertical alignment is very easy.

form {
  width: 80%;
  display: flex;
  justify-content: space-around; /* Spread white space equally between and around items */
  align-items: center; /* Vertical alignment */
}
<form [formGroup]="formGroup">
  <button class="td to-left-end" (click)="toFirstPage()"></button>
  <button class="td" (click)="toPrevPage()"></button>
  <input class="td" type="text" readonly formControlName="currentPageInfo">
  <button class="td" (click)="toNextPage()"></button>
  <button class="td" (click)="toLastPage()"></button>
  <select class="td" formControlName="pageSize">
    <option *ngFor="let item of pageSizes">{{item}}</option>
  </select>
</form>

Upvotes: 1

Sazzad Hussain
Sazzad Hussain

Reputation: 321

Add CSS:

button{
height: 24px;
padding-top: 12px;
}

Upvotes: 0

Anmol Sandal
Anmol Sandal

Reputation: 1488

Just try vertical-align: top to button, input and select field. one suggestion these form control render differently in diff browsers.

In this case you need to add appearence: none; and set height and width for form controls.

button, input, select {vertical-align: top; -webkit-appearance:none; appearance:none; height: 30px; border: 1px solid; box-sizing: border-box;}
<form [formGroup]="formGroup">

  <button class="td to-left-end" (click)="toFirstPage()"></button>
  <button class="td" (click)="toPrevPage()"></button>

  <input class="td" type="text" readonly formControlName="currentPageInfo">

  <button class="td" (click)="toNextPage()"></button>
  <button class="td" (click)="toLastPage()"></button>

  <select class="td" formControlName="pageSize">
    <option *ngFor="let item of pageSizes">{{item}}</option>
  </select>

</form>

Upvotes: 4

Toolbox
Toolbox

Reputation: 2473

To position your buttons use "grid" that is built-in with CSS. Add "id" to each button item you want to control. Then use CSS padding and margin to get the detail adjustments of button position in place.

Upvotes: 0

Related Questions