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

【问题标题】：How to fix the buttons on bottom and scroll the remaining content如何修复底部的按钮并滚动剩余内容
【发布时间】：2017-10-16 08:31:07
【问题描述】：

我正在尝试在弹出窗口（Devextreme 弹出窗口）上显示内容（在 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>

【问题讨论】：

标签： html css angular scrollview devextreme

【解决方案1】：

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

//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，则自动高度将为您工作。

【讨论】：

当内容 div 变大时，scrollview 的高度也变大了，因为溢出弹出窗口，它不会滚动内容。实际上，我想将 Content Div 的高度设置为弹出窗口的 %90 ，其余的 %10 用于按钮。如果内容不适合 %90 的一部分，则应该可以滚动但无法实现。
@BlackEagle 我已经更新了答案。希望这能解决您的问题。我无法使用上述更改刷新页面。所以请在你最后试一试并告诉我。
非常感谢您的关注。当我用你的改变css时没有任何改变。但据我了解，您想为 dx-scroll-view 设置最大高度。我更新了我的 plunker 并将的高度设置为 400px。但是当我这样做时，它不会再响应了，正如你在我的 plunker 上看到的那样。 plnkr.co/edit/ERpesFefmMGM99LuM6nj?p=preview
对我来说，它的工作在这里是更新的 Plunker plnkr.co/edit/AOlMD4diR0iRxPOUjm51?p=preview 我在 style.css 中更新虽然它不会被称为响应式，但您可以将其称为自适应

【解决方案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);">

【讨论】：