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

Question

我试图显示Popup（Devextreme弹出窗口）中的内容（ScroolView内部），并且Popup底部有按钮。内容越来越大的问题，按钮在弹出窗口中消失。这意味着ScrollView（Devextreme ScrollView）无法按预期工作。我必须修复弹出窗口的按钮和ScrollView（它里面的内容）应该使用弹出窗口的其余部分。

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

我做了一个简单的演示，显示问题。
http://plnkr.co/edit/ERpesFefmMGM99LuM6nj?p=preview

我该如何做到这一点？

PS：我使用的角度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

我已经解决了这个问题。需要将窗体停靠在弹出内容中。为此，请将100％高度设置为表单。然后，您需要通过按钮的高度减小滚动视图高度。所以，滚动视图的高度应该是100％ - 36像素。 查看已更新的plunk。

这是更新的部分。

形式标签：

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

滚动视图标签：

当内容DIV挺大

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

Answer 2

你必须设置高度.dx，可滚动native.dx-可滚动本机通用类。无论是静态的还是动态的，都取决于你。当你说响应它会根据设备的高度表现。但是，对于您的弹出你有，如果含量超过容器滚动将在那里指定内容容器

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

} 

更新这个CSS在dx.common.css行号991 400的大致高度的高度，如果内容小于400，自动高度将适用于您。