mat select 不在某个位置

Question

我在页面中添加图片时遇到问题。图中的 selected 选项

但如果我删除图像，结果是正常的，没有问题

这是我的代码

.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%;
}

我正在使用 angular 5 material。有没有办法覆盖 angular material 中 select 选项的默认位置？或者有没有其他解决方案 problem.Thank you

演示：https://stackblitz.com/edit/angular-mat-select2-tjeqfz?file=app/select-hint-error-example.html 感谢 Yerkon

Answer 1

select选项的位置由Material自身动态计算。定位元素具有 class cdk-overlay-pane 并且您可以在创建 select 实例时添加自己的特定 css class ，如文档 [=12= 中所述]

如果您使用的是模板，请尝试向模板添加自定义 css class 并使用样式来达到预期效果。

但请记住，位置是动态计算的，取决于可用 space、select 与屏幕顶部或底部的距离等。

Answer 2

Material select 有私有方法 _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. */

您不能覆盖它，它是 private。我认为您应该在 Angular material github 上打开 issue，或者它可能已经打开了。但是正如您所见，当您调整 window 的大小时或进行滚动时，对话框会重新计算它的位置。

Answer 3

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

在我上面反映的 HTML 代码中，删除宽度为 100% 的 class example-full-width。

mat select 不在某个位置

mat select not in certain position

angular-material

angular

angular5

angular-material-5