css Question posted in
Some basic documentation can be found here.

Css – Angular Material Select List Drop Down Arrow Position Not Right-hand but Middle

I have an odd situation where a deeply nested HTML segment of code may be inheriting some stylings from a parent that I can’t predict or control. The widget is pretty straight forward…

<mat-form-field appearance="fill" class="full-width-input" *ngIf="!isMultiSelect">
  <mat-label>{{ selectListForm.get('commonSettings').get('label')?.value }}</mat-label>
  <mat-select [value]="data?.state?.defaultValue">
    <mat-option *ngFor="let option of options.controls" [value]="option.get('value')?.value">
      {{ option.get('label')?.value }}
    </mat-option>
  </mat-select>
  <mat-hint class="custom-mat-hint">{{ selectListForm.get('commonSettings').get('suggestedText')?.value }}</mat-hint>
</mat-form-field>

And the .scss stylings aren’t that wild…

.preview-section {
  position: relative;

  mat-form-field {
    display: block;
    margin-bottom: 0.5rem;
  }

  .custom-mat-hint {
    display: block;
    margin-left: 24px;
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.54);
  }
}
.preview-title {
  color: #5c9edb; /* Light blue color */
  font-weight: bold; /* Make it bold for emphasis */
}
.preview-wrapper{
  margin-left: 15px;
  margin-top: 8px;
}

But whenever the select list is greater than say 280px wide, the drop arrow on the right seems to hit a wall at say pixel 270 or so and stick there. So, if the object is 400px, the arrow looks like it is in the middle of the object rather than on the right side. Is this an internal Material limitation that can be overridden?

Arrow in middle of select-list

Tags:

2

Answers


  1. 0

    I think the mat-select is having a width of 280px either through parent CSS. So you can set the height manually so that overrides the parent CSS.

    The usage of ::ng-deep is frowned upon, so you can add this style to the global styles also.

    ::ng-deep mat-select.full-width {
  width:100% !important;
}

    We can add a class full-width to scope the changes to this select alone.

    <mat-form-field appearance="fill" class="full-width-input">
  <mat-label>Favorite food</mat-label>
  <mat-select class="full-width">
    @for (food of foods; track food) {
    <mat-option [value]="food.value">{{food.viewValue}}</mat-option>
    }
  </mat-select>
  <mat-hint class="custom-mat-hint">some hint</mat-hint>
</mat-form-field>

    Stackblitz Demo

    Login or Signup to reply.
  2. 0

    Change your custom class "full-width-input" to "mat-mdc-form-field-infix" because it is the default class for mat-form-field. This will allow you to adjust the mat-label width if needed. Additionally, the mat-select arrow will also be properly aligned with the mat-label.

    Html file:

    <mat-form-field appearance="fill" class="mat-mdc-form-field-infix">
  <mat-label>Your Label</mat-label>
  <mat-select>
    <mat-option value="one">First option</mat-option>
    <mat-option value="two">Second option</mat-option>
  </mat-select>
</mat-form-field>

    Css file:

    .mat-mdc-form-field-infix {
  flex: auto;
  min-width: 0;
  width: 330px;
  position: relative;
  box-sizing: border-box;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search