如何修复底部的按钮并滚动剩余内容

Question

我正在尝试在弹出窗口 (Devextreme Popup) 上显示内容（在 ScroolView 内），并且在弹出窗口的底部有按钮。当内容变大时，按钮在弹出窗口中消失的问题。这意味着 ScrollView (Devextreme ScrollView) 没有按预期工作。我必须修复弹出窗口的按钮和 ScrollView（其中的内容）应该使用弹出窗口的其余部分。

我不想为 ScrollView 设置特定的高度，因为我想让它响应。

我制作了一个简单的演示来说明问题。
http://plnkr.co/edit/ERpesFefmMGM99LuM6nj?p=preview

我怎样才能做到这一点？

ps: 我正在使用 Angular 2.x 框架

这是示例的来源

<dx-popup #searchPopup maxWidth="40%" height="90%" class="popup" [showTitle]="true" [dragEnabled]="true" title="Test Pop" [visible]="true">  <div *dxTemplate="let data of 'content'">

<form id="searchForm" #f (ngSubmit)="do()" class="form-horizontal" >

  <dx-scroll-view    [showScrollbar]="Always">
    <!-- Dynamic content which is gonna getting bigger -->
  </dx-scroll-view>

  <div class="form-actions">
    <div class="row">
      <div class="col-md-12">
        <dx-button text="Button 1" type="normal" ></dx-button>
        <dx-button  id="button" text="Button 2" type="default" [useSubmitBehavior]="true"></dx-button>
      </div>
    </div>
  </div>

</form>  </div> </dx-popup>

Answer 1

您必须将高度设置为 .dx-scrollable-native.dx-scrollable-native-generic class。静态或动态取决于您。当您说响应时，它会根据设备高度运行。但是对于弹出窗口，您必须指定内容容器的高度

//dx.common.css line number 991

.dx-scrollable-native.dx-scrollable-native-generic {
    -ms-overflow-style: auto;
    /* overflow: hidden; */
    max-height: 400px;
    overflow-y: scroll;

}

在 dx.common.css 行号 991 中更新此 css。400 是近似高度，如果内容超出容器，滚动将在那里，如果内容小于 400，自动高度将为您工作.

Answer 2

我已经解决了这个问题。需要将表单停靠在弹出内容中。为此，将窗体的高度设置为 100%。然后，您需要将滚动视图的高度降低按钮的高度。因此，滚动视图高度应为 100% - 36 像素。查看更新后的 plunk.

这是更新的部分。

表单标签：

  <form id="searchForm" #f (ngSubmit)="search()" class="form-horizontal" style="height: 100%;">

滚动视图标签：

 <dx-scroll-view    [showScrollbar]="'always'" style="height: calc(100% - 36px);">

如何修复底部的按钮并滚动剩余内容

How to fix the buttons on bottom and scroll the remaining content

html

css

scrollview

devextreme

angular