How to position the Dropdown Panel for this Dropdown box

Issue

I am following this question in Angular

Dropdown

This is the HTML code. There are few classes used here..

<div *ngIf="showConsumptionTypeSection" class="field third">
    <p class="label">Timezone</p>
    <p *ngIf="!editSettings" class="value">{{ getSelectedTimeZone(step.get('timeZone').value)  }} </p>
    <mat-select *ngIf="editSettings" 
        color="primary"           
        formControlName="timeZone" 
        placeholder="Select a timezone"
        [(value)]="selectedTimeZone" panelClass="custom-panel-timezone">  
        <mat-option *ngFor="let t of utcTimezoneList" [value]="t.value">{{t.text}} </mat-option>
    </mat-select>
</div>

The CSS Setting applied in style.scss

.custom-panel-timezone {
  margin: 42px 0px !important;
}

But with this setting, it is display over the textbox even after applying !important to it. The other class setting are applied to its related TS file.

The CSS file related to that TS file is as below..

.field {
    margin-bottom: 24px;
    .custom-file{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    &.full {
        width: 100%;
    }

    &.half {
        width: 100%;

        @include small {
            width: calc(50% - 15px);
        }
        @include xlarge {
            width: calc(50% - 25px);
        }
    }

    &.third {
        width: 100%;

        @include small {
            width: calc(33.333% - 15px);
        }
        @include xlarge {
            width: calc(33.333% - 25px);
        }
    }

    p.label {
        color: $gray;
        margin-bottom: 8px;
    }

    p.value {
        color: $primary;
        margin: 0;
        font-weight: 700;
    }

    p.valuepc {
        color: $primary;
        margin: 0;
        font-weight: 700;          

        @include large{
            float: left;
            width: 20%;
        }
    }

    p.valuesc {
        color: $primary;
        margin: 0;
        font-weight: 700;
        
        @include large{
            float: left;
            width: 20%;
        }
    }

    .color-palette {
        position: relative;

        input[type="text"] {
            &:read-only {
                background: $white;
                cursor: default;
            }
        }

        input[type="color"] {
            position: absolute;
            visibility: hidden;
            left: 0;
            bottom: -15px;
            transform: translate(0, -50%);
            width: 25px;
            padding: 0;
            margin: 0;
        }

        .mat-icon {
            position: absolute;
            right: 7.5px;
            top: 50%;
            transform: translate(0, -50%);
            color: $primary;
            cursor: pointer;

            &.secondary {
                color: $secondary;
            }
        }
    }

    .prmcolorsection{

        @include large{
            width: 30%;
        }
       
    }
    .color-box{
        width: 25px;
        height: 25px;
        border-radius: 4px;
        @include large{
            float: right;
        }
    }

    .seccolorsection{
        @include large{
            width: 30%;
        }
    }
}

EDIT

There is one important clue I found out in recent investigation. When I have commented out the whole file of _material-overrides.scss, then our panelClass is working but only once.. Here is the code of the _material-overrides.scss file below..

::ng-deep {

  // Material updates
  .mat-drawer-inner-container {
    overflow: hidden !important;
  }

  .mat-checkbox {
    .mat-checkbox-frame {
      border-width: 1px !important;
    }

    .mat-ripple-element {
      background: $primary !important;
    }

    .mat-checkbox-label {
      color: $darkGray;
      line-height: 21px;
    }

    &.mat-checkbox-checked {
      .mat-checkbox-background {
        background: $secondary;
        border-radius: 2px;
      }
    }
  }

  .util-color {
    .mat-checkbox {
      .mat-ripple-element {
        background: $utilPrimary !important;
      }

      &.mat-checkbox-checked {
        .mat-checkbox-background {
          background: $utilPrimary !important;
        }
      }
    }
  }

  // Override Bootstrap icon width/height
  .mat-icon.fa {
    width: auto;
    height: auto;
  }

  // Snackbar
  .mat-snack-bar-container {
    color: $white;
    margin: 5.5px 20px;
    min-width: 220px !important;
    max-width: 500px !important;

    @media screen and (max-width:375px) {
      font-size: 12px !important;
    }

    &.error {
      background: $red;
    }

    &.warning {
      background: $yellow;
      color: black;
    }

    &.success {
      background: $green;
    }

    .mat-simple-snackbar-action button {
      color: $white;
    }
  }

  .mat-snack-bar-handset {
    width: auto !important;
  }

  // Stepper - horizontal
  .mat-stepper-horizontal {
    .mat-horizontal-stepper-header-container {
      margin-bottom: 10px;

      .mat-horizontal-stepper-header {
        height: 50px;
        padding: 0 5px 0 10px;

        .mat-step-icon {
          background: $matStepUnvisited;
        }

        .mat-step-icon-selected {
          background: $matStepActive;
        }

        .mat-step-icon-state-edit {
          background: $matStepVisited;
        }

        .mat-step-label {
          display: none;
          color: $matStepText;

          @include small {
            display: block;
          }
        }
      }

      .mat-stepper-horizontal-line {
        margin: 0;
        color: $matStepHorizontalLine;
      }
    }

    .mat-horizontal-content-container {
      position: relative;
      padding: 5px;
    }

    &.util-color {

      .mat-step-icon-selected,
      .mat-step-icon-state-edit {
        background: $primary !important;
      }
    }
  }

  // Select
  .mat-select {
    border: 1px solid rgb(206, 212, 218);
    padding: 9.5px 9.5px 9.5px 15px;
    border-radius: 6px;
    margin-bottom: 16px;

    &.mat-select-disabled {
      opacity: 5;
    }

    .mat-select-trigger {
      height: auto;
    }
  }

  .mat-option {
    padding: 0 10px !important;

    @include small {
      padding: 0 16px !important;
    }
  }

  .mat-input-element {
    &.filter-select-options {
      padding: 12px 16px !important;
      width: calc(100% - 32px) !important;
      border-bottom: 1px solid rgba(0, 0, 0, .125) !important;
    }
  }

  // Mat Table
  .mat-table {
    .mat-header-row {
      height: 50px !important;

      .mat-header-cell {
        color: $secondary;
        padding: 12px 10px !important;
        font-size: 16px;
        font-weight: 700;

        &.min-width-90 {
          min-width: 90px;
        }

        &.sixth {
          width: 15% !important;
        }

        &.fifth {
          width: 20% !important;
        }

        &.quarter {
          width: 25% !important;
        }

        &.half {
          width: 50% !important;
        }
      }
    }

    .mat-row {
      height: 50px !important;

      .mat-cell {
        color: $darkGray;
        padding: 12px !important;
        font-size: 16px;

        &.sixth {
          width: 15% !important;
        }

        &.fifth {
          width: 20% !important;
        }

        &.quarter {
          width: 25% !important;
        }

        &.half {
          width: 50% !important;
        }
      }

      &:last-child {
        .mat-cell {
          border-bottom: none !important;
        }
      }
    }
  }

  // Mat Paginator
  .mat-paginator {
    .mat-paginator-container {
      padding: 0;

      .mat-paginator-page-size {
        display: none !important;
      }

      .mat-paginator-range-actions {
        flex: 1;

        .mat-paginator-range-label {
          font-size: 16px;
          color: #858796;
          margin: 0;
          padding-left: 12px;
        }

        .mat-focus-indicator[ng-reflect-disabled="false"] {
          color: $primary;
        }

        .mat-paginator-navigation-first {
          margin-left: auto;
        }
      }
    }
  }

  // Mat Calendar
  .mat-calendar {
    .mat-calendar-body {
      .mat-calendar-body-selected {
        background: $primary;
      }

      .mat-calendar-body-in-preview::before,
      .mat-calendar-body-in-range::before {
        border: none;
        background: rgba(0, 0, 0, 0.05);
      }

      .mat-calendar-body-preview-end {
        .mat-calendar-body-cell-content.mat-focus-indicator {
          background: transparent !important;
          border: 1px solid $primary;
        }
      }

      .mat-calendar-body-cell:hover:not(.mat-calendar-body-preview-end) {
        .mat-calendar-body-cell-content.mat-focus-indicator:not(.mat-calendar-body-selected) {
          border: none;
          background: rgba(0, 0, 0, 0.15);
        }
      }
    }
  }

  // Mat Datepicker Toggle
  .mat-form-field.datepicker-widget {
    .mat-form-field-wrapper {
      padding: 0;

      .mat-form-field-flex {
        display: flex;
        align-items: center;
        background: transparent;
        padding: 0;

        .mat-form-field-infix {
          border: none;
          padding: 0;
        }
      }

      .mat-date-range-input-container {
        justify-content: flex-end;
      }

      .mat-input-element,
      .mat-date-range-input-separator {
        color: $darkGray;
      }

      .mat-datepicker-toggle {
        button {
          color: $primary;
        }
      }
    }
  }

  // Mat Tab Group
  .mat-tab-group {
    .mat-tab-header {
      background: $matStepTab;

      .mat-tab-list {
        .mat-ink-bar {
          background: $primary;
        }
      }

      .mat-tab-label {
        text-transform: uppercase;
      }
    }

    .mat-tab-body {
      padding: 0 10px 20px;
    }
  }

  // Mat Switch
  .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background: $secondary;
  }

  .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background: rgba(21, 105, 158, .8);
  }

  #chartTypeToggle,
  #chartToggle {
    .mat-slide-toggle-thumb {
      background: $secondary !important;
      animation: slideToggleAnim ease .35s;

      @keyframes slideToggleAnim {
        0% {
          opacity: 0;
        }

        50% {
          opacity: 0;
        }

        100% {
          opacity: 1;
        }
      }
    }

    .mat-slide-toggle-bar {
      background: rgba(21, 105, 158, .8) !important;
    }
  }

  // Mat Progress Spinner
  .mat-progress-spinner circle,
  .mat-spinner circle {
    stroke: $secondary;
  }

  .mat-progress-spinner.white-stroke circle,
  .mat-spinner.white-stroke circle {
    stroke: $white;
  }

  // Mat Labels
  mat-label {
    color: $darkGray;
    font-weight: bold;
    padding-right: 10px;

    &.enabled {
      color: $primary;
      font-weight: bold;
      padding-right: 10px;
    }
  }
}

Solution

There is some CSS that is causing this CSS to get overriden, you need to inspect element and check the styles tab on the right and find out, which style is doing this, as a temporary workaround, you can attack this situation with CSS Specificity where you increase the Specificity of the CSS you added, it does not get overriden, please share back the stackblitz with the issue replicated if it still persists!

.custom-panel-timezone.override.override-css {
  margin: 42px 0px !important;
}

html

<div *ngIf="showConsumptionTypeSection" class="field third">
  <p class="label">Timezone</p>
  <p *ngIf="!editSettings" class="value">qwerqwerqwer</p>
  <mat-select
    *ngIf="editSettings"
    color="primary"
    placeholder="Select a timezone"
    [(value)]="selectedTimeZone"
    panelClass="custom-panel-timezone override override-css"
  >
    <mat-option *ngFor="let t of utcTimezoneList" [value]="t.value"
      >{{ t.text }}
    </mat-option>
  </mat-select>
</div>

stackblitz

Answered By - Naren Murali