[Fixed] 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">

    <input matInput placeholder="Title">

    <input matInput placeholder="Title">


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



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.

Leave a Reply

(*) Required, Your email will not be published