하단의 버튼을 수정하고 나머지 내용을 스크롤하는 방법

Question

Popup (Devextreme Popup)에 내용 (ScroolView 내부)을 표시하려고하고 있는데 팝업의 하단에 버튼이 있습니다. 콘텐츠가 커지면 버튼이 사라집니다. 그것은 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%;"> 

있는 ScrollView 태그 :

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

Answer 2

당신은 .dx - 스크롤 - 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; 

} 

업데이트 991. (400)는 대략 높이 dx.common.css 행 번호에서이 CSS의 높이를 지정해야하고 콘텐츠가 400보다 작 으면 자동 높이가 작동합니다.