Search code examples
cssangularangular-material

Dropdown Panel is not vertically aligned to the Dropdown Textbox in Angular

I am using Angular, Angular Material and CSS

I am trying to align the panel for the mat-select dropdown

<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>

There are 2 classes for this - sort-portals and custom-panel-order-types

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

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

The screenshot of the Dropdown is given below..

Dropdown

EDIT

The CSS of the Dropdown is given below..It is in the components CSS file. But the custom-panel-order-types is in styles.scss file...

.admin-header {
    display: flex;
    margin-bottom: 18px;

    h2 {
        margin: 0;
    }

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

Still with the Answer code, the panel is moving more to the left side.

How to align panel vertically to the Dropdown Textbox?

Solution

  • Its because you are adding extra padding to the select that the dropdown is misaligned, you can just apply the padding that you applied on the select as margin on the dropdown, this will solve your issue!

    .sort-portals {
  background: white;
  max-width: 150px;
  margin-left: auto;
  margin-bottom: 0;
  padding: 6px 6px 6px 11.5px;
  border: 1px solid black;
}

.custom-panel-order-types {
  min-width: 166px !important;
  margin: 34px 6px 34px 5px !important;
}

    stackblitz -> cd test -> npm i -> npm run start