angularoverlappingmat-form-field

mat-form-field overlapping into button below

i have a problem with a mat-form-field overlapping into a button. Making it so only the lower half is clickable.

I have the app hosted here on AWS https://main.d225v44fsxss8s.amplifyapp.com/selector

The problem is with the query button on the bottom left. It is being overlapped by the T_positions form field.

enter image description here

I have modified the form field sizes a bit but the issue still happens if i have all of those values to default.

I have tried adjusting the z-index of the button but that hasnt worked.

Edit: I also have another problem. That one is with the little info boxes. Ideally i would want them to be sizes in such a way that their width is equal to the largest sentence they contain.

or alternatively that they always stretch from their position to the right of the screen.

but i havent managed to get either working so far. enter image description here

Solution

  • Found the answer in the angular discord.

    Here is a quick stackblitz reproducing the issue. https://stackblitz.com/edit/mat-form-field-overlap?file=src/app/autocomplete-display-example.css

    The problem was that i had

    ::ng-deep .mat-form-field {
    margin-bottom: -1.25em
}

    to remove the gap between the input field and my button because it was simply wasted space.

    The proper way to do this however is

    ::ng-deep .mat-form-field-wrapper {
    padding-bottom: 0;
}

    (The setting is commented out in the stackblitz so anyone can confirm that it works) which removes that space but also does not overlap.