mat select not in certain position

Question

i have a problem, when i add a picture in my page. The selected option like in this picture

but if i remove the image the result is normal like no problems

Here is my code

.html

<div class="container">
    <img class="panjang" src="assets/imgs/cover_pln.png">
  </div>
<mat-tab-group mat-stretch-tabs color="accent">
  <mat-tab label="One" color="accent" >
    <br>
    <br> 
    <form class="example-form">
      <mat-form-field class="example-full-width">
        <input matInput placeholder="Test">
        <mat-hint>Test</mat-hint>
      </mat-form-field>
      <br>
      <br> 
      <mat-form-field class="example-full-width">
        <input matInput placeholder="Test">
        <mat-hint>Test</mat-hint>
      </mat-form-field>
      <br>
      <br> 
      <mat-form-field class="example-full-width">
        <input matInput placeholder="Test">
        <mat-hint>Test</mat-hint>
      </mat-form-field>
    </form>
  </mat-tab>
  <mat-tab label="Two" color="accent">
      <br>
      <br>
      <form class="example-form">
        <mat-form-field class="example-full-width">
          <input matInput placeholder="Test">
          <mat-hint>Test</mat-hint>
        </mat-form-field>
        <br>
        <br>
        <mat-form-field class="example-full-width">
          <input matInput placeholder="No.Ponsel">
          <mat-hint>Test</mat-hint>
        </mat-form-field>
        <br>
        <br>
        <mat-form-field class="example-full-width">
          <mat-select [(value)]="selected" placeholder="Test">
            <mat-option >Test</mat-option>
            <mat-option >Test</mat-option>
            <mat-option >Test</mat-option>
            <mat-option >Test</mat-option>
            <mat-option >Test</mat-option>
            <mat-option >Test</mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field class="example-full-width">
          <input matInput placeholder="Test">
          <mat-hint>Test</mat-hint>
        </mat-form-field>
      </form>
  </mat-tab>
</mat-tab-group>

.css

.mat-tab-label {
        background-color: transparent;
        color: #5c5c5c;
        font-weight: 700;
    }

/* Styles for the active tab label */
.mat-tab-label.mat-tab-label-active {
    background-color: transparent;
    color: #448AFF;
    font-weight: 700;
}
.example-form {
    min-width: 50%;
    max-width: 100%;
    width: 100%;
}

.example-full-width {
  width: 100%;
  margin-top:1%;
}
.mat-select{
    margin-top: 1%;
    position: bottom;
}
.panjang{
    width:75%;
}
.container{
    align-items: center;
    text-align: center;
    margin-left:1%;
    margin-right:1%;
}

i'm using angular 5 material. Is there any way to override the default position of select option in angular material? or is there any other solution of this problem.Thank you

The Demo :https://stackblitz.com/edit/angular-mat-select2-tjeqfz?file=app/select-hint-error-example.html thanks to Yerkon

Answer 1

The position of the select's option is calculated dynamically by Material itself. The positioned element has class cdk-overlay-pane and you can add your own specific css class when creating instance of the select as mentioned in the documentation https://material.angular.io/cdk/overlay/api#OverlayConfig

If you are using template, then try to add custom css class to the template and play with the styles to achieve desired effect.

But keep in mind, that the position is calculated dynamically and depends on available space, how close is the select to the top or bottom of the screen etc.