Question

我有一个问题，当我在我的页面中添加图片时。所选选项如此图片所示

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

一样

这是我的代码

html的

   //GoogleSignIn

    GIDSignIn.sharedInstance().clientID = FirebaseApp.app()?.options.clientID
    GIDSignIn.sharedInstance().uiDelegate = self as GIDSignInUIDelegate
    GIDSignIn.sharedInstance().delegate = self

    let GoogleLoginButton = GIDSignInButton()
    view.addSubview(GoogleLoginButton)
    GoogleLoginButton.frame = CGRect(x: 16, y: 350, width: view.frame.width - 32, height: 46)

    // FacbookLoginButton

    let FBLoginButton = FBSDKLoginButton()
    view.addSubview(FBLoginButton)
    FBLoginButton.frame = CGRect(x: 16, y: 410, width: view.frame.width - 32, height: 46)
    FBLoginButton.delegate = self

的CSS

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

我使用角度5材料。有没有办法覆盖角度材质中选择选项的默认位置？还是有任何其他问题的解决方案。谢谢你

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

Answer 1

选择的选项的位置由材料本身动态计算。定位元素具有类cdk-overlay-pane，您可以在创建文档https://material.angular.io/cdk/overlay/api#OverlayConfig

中提到的select的实例时添加自己的特定css类

如果您使用的是模板，请尝试将自定义css类添加到模板中并使用样式来实现所需的效果。

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

Answer 2

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

/ ** *计算选择的叠加面板的y偏移量与触发器的*顶部起始角的关系。它一定要是调整，以便*选定的选项对齐面板打开时触发。 * /

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

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％的课程example-full-width。

垫选择不在某个位置

3 个答案: