CODEWITHSUNDEEP
angularangular-materialangular5angular-material-5
Twisted reality
Twisted reality

Reputation: 540

mat select not in certain position

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

but if i remove the image the result is normal like no problemsenter image description here

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

Upvotes: 1

Views: 14621

Answers (3)

vinayak kakkalameli
vinayak kakkalameli

Reputation: 46

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

In your HTML code which i have reflected above, remove class example-full-width which has 100% width.

Upvotes: 1

Yerkon
Yerkon

Reputation: 4798

Material select has private method _calculateOverlayOffsetY:

/** * Calculates the y-offset of the select's overlay panel in relation to the * top start corner of the trigger. It has to be adjusted in order for the * selected option to be aligned over the trigger when the panel opens. */

You can't override it, it's private. I think you should open issue on Angular material github or maybe it's already opened. But as you can see, when you resize the window or do scrolling, dialog recalculates it's position.

Upvotes: 1

David Votrubec
David Votrubec

Reputation: 4166

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.

Upvotes: 4

Related Questions