1

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

但是如果我删除图像，结果是正常的，没有问题在此处输入图像描述

这是我的代码

.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

4

3 回答 3

4

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

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

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

于 2018-04-02T09:02:59.937 回答
1

材质选择具有私有方法_calculateOverlayOffsetY：

/** * 计算选择的覆盖面板相对于触发器的顶部起始角的 y 偏移量。必须对其进行调整，以便在面板打开时 * selected 选项与触发器对齐。*/

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

于 2018-04-02T11:31:05.990 回答
1 
<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 代码中，删除example-full-width具有 100% 宽度的类。

于 2018-05-22T11:52:55.070 回答