垫选择不在特定位置

Question

当我在页面中添加图片时，我遇到了问题。像这张图片中选择的选项

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

这是我的代码

.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 材质。有没有办法覆盖角材料中选择选项的默认位置？或者有没有其他解决这个问题的方法。谢谢

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

Answer 1

select的选项的位置是由Material自己动态计算的。 定位元素具有类cdk-overlay-pane，您可以在创建文档https://material.angular.io/cdk/overlay/api#OverlayConfig中提到的选择实例时添加自己的特定css类

如果您正在使用模板，请尝试将自定义 css 类添加到模板中并使用样式来达到预期的效果。

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

Answer 2

<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% 宽度的类 example-full-width。

Answer 3

材质选择有私有方法_calculateOverlayOffsetY:

/** * 计算选择的覆盖面板的 y 偏移量 与触发器的 * top start 角相关。它一定要是 调整以使 * 选择的选项在 面板打开时触发。 */

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