Search code examples
cssangularangular-material

Dropdown panel is moving 30px to the left on click of search in Angular

I am using Angular, Angular Material and css

<mat-select disableOptionCentering class="sort-portals" value="newest" panelClass="custom-panel-order-types">
    <mat-option value="newest">Newest</mat-option>
    <mat-option value="oldest">Oldest</mat-option>
    <mat-option value="ascending">Sort A to Z</mat-option>
    <mat-option value="descending">Sort Z to A</mat-option>
</mat-select>

The sort-portals class is defined as below...

.sort-portals {
    background: $white;
    max-width: 150px;
    margin-left: 880px;
    margin-bottom: 0;
    padding: 6px 6px 6px 11.5px;
}

The panelClass is defined as below...

.custom-panel-order-types {
  margin: 34px 0px !important;
  min-width: 150px !important;
  margin-right: 5px !important;
  width: 30px !important;
}

The problem here is on load of the page for the first time, the Dropdown panel aligns properly to the dropdown textbox. But, when I enter some id in the search box and press enter, the width of the page increases and the alignment of the Dropdown panel moves to the left by 20px and it looks as below..

Alignment of Dropdown Panel

EDIT

When I use appearance as outline with mat-form-field, it appears like below...and is left aligned to the page..

Appearance

Solution

  • Could you try the below CSS, do not modify the CSS of mat-select instead add padding to the child mat-mdc-select-trigger.

    .sort-portals {
  background: white;
  max-width: 150px;
  height: 40px;
  display: flex !important;
  align-items: center;
  box-sizing: border-box;
}
.sort-portals .mat-mdc-select-trigger {
  padding: 0px 15px;
}

.custom-panel-order-types {
  margin: 34px 0px !important;
  min-width: 150px !important;
}

    Stackblitz Demo