Question

我正在使用角度和角度材料。

在页面内部，我有一个表单，以及一些依赖于此表单的按钮（按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

我想我遇到了同样的问题。 Normaly我会使用位置fixed，但这不起作用，因为材料使用transform: translate3d(0,0,0)。这个fixed表现得像absulote。为了解决这个问题，我使用了这个：

//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);
  }
}

我在材料github页面上找到了它。它将内容直接放在正文中，因此您可以使用position: fixed。

是否有可能在角形内部有粘性div？

3 个答案: