是否可以在 angular 表单中添加粘性 div？

Question

我正在与 angular 和 angular-material 合作。

在一个页面中，我有一个表单和一些依赖于此表单的按钮（分组在 div 中）。

但是，我希望这些按钮（div）位于页面底部，即使我滚动也是如此。

这是一些代码：

<form (ngSubmit)="update()" #updateForm="ngForm">
  <div> some content with inputs and selects </div>
  <div class="button-container"> buttons like save, cancel, ... </div>
</form>

和：

.button-container {
  position: sticky !important;
  bottom: 0;
  float: right;
  z-index: 999;
}

如果我将按钮放在窗体之外，它们将不再起作用。问题是，如果我不更改按钮的方法，只修改 HTML 和 CSS 会更好。我所做的不起作用，知道吗？

我是在 plunker 上做的，具有与我的项目相同的 CSS 属性 https://plnkr.co/edit/pw7zOruWwhV0o1Vya717?p=preview

Answer 1

如果您无法在 plunkr 中重现失败的版本，那么您项目中的其他一些 css 样式可能会阻止粘滞位置。

在我的例子中，如果包含的 div 有

，则粘性位置不起作用

overflow:hidden;

也许您在 div?

上设置了值

Answer 2

为滚动元素设置固定高度并固定按钮位置：

<div style="height:calc(100vh - 100px) !important; overflow: scroll !important" class="mat-tab-body-content ng-trigger ng-trigger-translateTab">

......

<button style="top: calc(100vh - 50px) !important; position: fixed !important" md-button (click)='alert("clicked!");'>button</button>

Plunker

Answer 3

我想我遇到了同样的问题。通常我会使用位置 fixed，但这行不通，因为 material 使用了 transform: translate3d(0,0,0)。这使得 fixed 表现得像 absolute。为了解决这个问题，我使用了以下内容：

//Place this in your form

<app-fnls-displacer>
  <div style="position: fixed; right: 30px; bottom: 30px; padding-bottom: 2em; z-index: auto">
    <button mat-fab class="fab" type="submit" (click)="myfunction()">
      <mat-icon>add</mat-icon>
    </button>
  </div>
</app-fnls-displacer>

这是使用的组件和指令：

import {AfterViewInit, Component, Directive, OnDestroy, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';

import {Overlay, OverlayRef, OverlayConfig, TemplatePortal} from '@angular/material';

@Directive({ selector: '[displacerPortal]' })
export class DisplacerPortalDirective extends TemplatePortal<any> {
  constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef) {
    super(templateRef, viewContainerRef);
  }
}

@Component({
  selector: 'app-fnls-displacer',
  template: `
    <ng-template displacerPortal>
      <ng-content></ng-content>
    </ng-template>
  `
})
export class DisplacerComponent implements OnDestroy, AfterViewInit {

  private _config = new OverlayConfig();

  @ViewChild(DisplacerPortalDirective)
  private _portal: DisplacerPortalDirective;

  private _overlayRef: OverlayRef = undefined;

  constructor(private _overlay: Overlay) {}

  public ngOnDestroy() {
    this._overlayRef.detach();
  }

  public ngAfterViewInit() {
    this._overlayRef = this._overlay.create(this._config);
    this._overlayRef.attach(this._portal);
  }
}

我在 material GitHub 页面上找到了它。它将里面的内容直接放到正文中，这样你就可以使用position: fixed.

是否可以在 angular 表单中添加粘性 div？

Is it possible to have sticky div inside an angular form?

html

css

forms

sticky

angular