CODEWITHSUNDEEP
cssangularbuttoninputstyling
Gibran Shah
Gibran Shah

Reputation: 1109

Please help align by button with CSS

I’m working on an Angular 6 project and I’m having problems with style a button.

Here’s my code: 

.endpointBox {
  width: 100%;
  padding: 0; //7px;
  background-color: #EEE;
  border: #AAA solid 1px;
  border-radius: 3px;
  overflow: auto;
}

.methodSelect {
  width: 200px;
  height: 30px;
  background-color: white;
  border: #AAA solid 1px;
  border-radius: 3px;
  margin: 0;
  padding: 0;
}

.urlBox {
  background-color: white;
  border: #AAA solid 1px;
  width: 300px;
  height: 30px;
  padding: 0;
  margin: 0;
  border-radius: 3px;
}

.goButton {
  width: 50px;
  height: 30px;
  background-color: white;
  border: #AAA solid 1px;
  border-radius: 10px;
  margin: 0;
  padding: 0;
  text-align: center;
}
<div class="endpointBox">

  <mat-select [(value)]="selectedMethod" class="methodSelect">
    <mat-option value="GET">GET</mat-option>
    <mat-option value="POST">POST</mat-option>
  </mat-select>

  <input matInput type="text" placeholder="Enter request URL" class="urlBox" />

  <button matButton (click)="go_clicked()" class="goButton">Go</button>
</div>

When I run this, I get this:

Go button out of alignment

Notice how the Go button pushes the top of the grey div up by a few pixels rather than takes up the space below it. How can I get the button to be aligned with the other two controls (the text and select inputs)? They are all the same height. Why does the button insist on being above the other controls by a few pixels?

Upvotes: 0

Views: 59

Answers (1)

Jucaro
Jucaro

Reputation: 37

By default form elements are displayed as 'inline-block'. So you must define vertical-align attribute to those 3 elements. 

.methodSelect, .urlBox, .goButton{ vertical-align:top }

Upvotes: 1

Related Questions