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

Question

我试图在Popup（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);">