Question

我有一个包含某些项目（“标签”）的对话框和一个带有“完成”按钮的页脚。当项目足够填充时，将添加滚动并在所有项目下方显示页脚。

但是我想始终显示页脚，将其固定，并使滚动仅适用于填充的项目。

        <Dialog
            hidden={this.state.hideDialog}
            onDismiss={this._closeWithoutSavingDialog}
            containerClassName={'ms-dialogMainOverride ' + styles.textDialog}
            modalProps={{
                isBlocking: false,
            }}>

            <div className={styles.tags}>
                <div className={styles.tagsDialogCloud}>
                    {this.state.dialogTags.map((tag, index) => this.renderDialogTags(tag, index))}
                </div>                
            </div>

            <DialogFooter>
            {this.state.showDialogButton == true ?
                <DefaultButton
                    style={{ backgroundColor: '#ff0033', color: '#ffffff' }}
                    onClick={this._closeDialog}
                    text="Done"
                />:null
            };
            </DialogFooter>
        </Dialog>
    </div>;

enter image description here

图片显示了我想要实现的示例。 “标签”部分是可滚动的，但始终显示“完成”按钮。

Answer 1

尝试使用此HTML作为对话框代码/您可以根据对话框修改代码，这是一个提示。

<div id="header" style="position:absolute; top:0px; left:0px; height:200px; right:0px;overflow:hidden;"> 
    </div> 
    <div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; right:0px; overflow:auto;"> 
    </div> 
    <div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;"> 
    </div>

希望这对您有帮助...

快乐的编码...

Answer 2

这听起来像是CSS问题，而不是React问题。
您的代码存在的问题是DialogFooter组件应该是绝对的，因此它不会扩展父级的高度，因此您应该在无条件的情况下呈现按钮。

以下是如何实现此目标的示例：
JSX：

<div className="popup-wrapper">
    <div className="popup">
      <div className="popup-content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
        aliquip ex ea commodo consequat. Duis aute irure dolor in
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
        culpa qui officia deserunt mollit anim id est laborum.
      </div>
      <div className="popup-footer" />
    </div>
  </div>

CSS：

.App {
  font-family: sans-serif;
  text-align: center;
}

.popup-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup {
  height: 300px;
  width: 200px;
  background: grey;
  position: relative;
}

.popup-footer {
  height: 40px;
  width: 100%;
  position: absolute;
  bottom: 0;
  background: silver;
}

.popup-content {
  max-height: 260px;
  overflow: auto;
}

并且可以找到沙箱here

具有固定页脚的对话框

2 个答案: