I am trying to show the content (inside ScroolView) on the Popup (Devextreme Popup) and there are buttons on the bottom of the Popup. The problem when the content getting bigger, buttons disappear on the popup. It means ScrollView (Devextreme ScrollView) doesn't work as expected. I have to fix the buttons of the popup and ScrollView (the content inside it) should use the remaining part of the popup.
I don't want to set a specific height for ScrollView because I want to make it responsive.
I make a simple demo that shows the problem.
http://plnkr.co/edit/ERpesFefmMGM99LuM6nj?p=preview
How can i achieve this?
ps: I am using the Angular 2.x framework
And this is the source of the sample
<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>
I have solved this issue. it is need to dock the form inside the popup content. To do this, set the 100% height to the form. Then, you need to decrease the scroll view height by the height of your buttons. So, the scroll view height should be 100% - 36 pixels. See the updated plunk.
this is the updated parts.
form tag:
<form id="searchForm" #f (ngSubmit)="search()" class="form-horizontal" style="height: 100%;">
scroll-view tag:
<dx-scroll-view [showScrollbar]="'always'" style="height: calc(100% - 36px);">