How to distribute and resize elements using fxFlex?

user_12351944 0
Viewed 680

The goal

I'm trying to write my own search bar for mat-table. The search bar consists only of inputs - one for each column. I placed it right above the table and now I'm trying to distribute them equally with the help of flex-layout, like the table does with its columns.

The problem

But the problem is that those inputs don't listen to me and don't shrink but they overflow outside the wrapping element. I need them to shrink equally to fit in the wrapping section but I don't know how to do this.

The code

Here is the sample of the code I wrote so far:

    <section fxLayout="row" class="search-table" style="overflow-x: auto;">
        <mat-form-field *ngFor="let item of items" fxFlex>
            <input matInput type="text" placeholder="sample text" fxFlex>
        </mat-form-field>
    </section>

    .search-table {
        border: 1px solid black;
    }

EDIT

Here's stackblitz example of my problem. Flex-layout don't work there for some reason so I added flex to css.

angular-flex-layout flexbox angular css html
1 Answers

The problem comes from the .mat-form-field-infix class which sets a width of 180px on the input.

Solution: Add the class below to the styles.css file

.mat-form-field-infix {
  width: auto!important;
}

StackBlitz: here

user_107535040
Related