CODEWITHSUNDEEP
htmlcssangularangular-material
Juan
Juan

Reputation: 2084

Adapt the Angular Material input field to screen width

I want to make a two equal column grid with CSS grid system. In each of the columns I want to put an input field that takes the 100% of the column's width. To achieve this I have this html:

<div class="grid">

  <mat-form-field>
    <input matInput placeholder="Title">
  </mat-form-field>

  <mat-form-field>
    <input matInput placeholder="Title">
  </mat-form-field>

</div>

And this CSS:

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2em;
}

The result in fullscreen is fine but when I decrease browser window width the input field on the right goes outside of the container.

Images attached with the exposed behaviour.

Full screen

Resized

Upvotes: 2

Views: 9857

Answers (2)

Antoine Clavijo
Antoine Clavijo

Reputation: 1305

Did you try to add a width: 100% to the mat-form-field?

If it's not working, try to use angular flex layout to use css flexbox in your angular projet.

Upvotes: 2

Juan
Juan

Reputation: 2084

To achieve the desired result I enclose both of the input fields inside a <div> with the next CSS class:

.mainContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

And then apply to each field this properties:

.mainContainer > * {
    flex: 1;
    margin-right: 15px;
}

Upvotes: 1

Related Questions