3

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>
Must.Tek
  • 1,220
  • 10
  • 17

2 Answers2

2

You have to set the height to .dx-scrollable-native.dx-scrollable-native-generic class. Either static or dynamically its up to you. When you say responsive it will behave according to the device height. But for your popup you have to specify the height of your content container enter image description here

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

}

Update this css in dx.common.css line number 991. 400 is the approximate height if content exceeds the container scroll will be there and if content is less than 400 the auto height will work for you.

Krishna9960
  • 529
  • 2
  • 12
  • when the content div getting bigger, the scrollview height is getting bigger too and it doesnt scrolling the content because overflow the popup. Actually I want to do set height of Content Div as %90 of the popup and remaining %10 for the buttons. If the content does not fit in part of %90, should be scrollable but couldnt achive this. – Must.Tek Oct 16 '17 at 09:26
  • 1
    @BlackEagle I have updated the answer. Hope this should solve your problem. I Couldn't refresh the page with the above changes. So please give it a try at your end and let me know. – Krishna9960 Oct 16 '17 at 10:33
  • Thank you so much for your interest. Nothing changed when i changed the css with yours. But as i understand you want to do set a max-height for dx-scroll-view. I updated my plunker and set the height of the as 400px. But when i do this, it won't be responsive anymore as you can see on my plunker. http://plnkr.co/edit/ERpesFefmMGM99LuM6nj?p=preview – Must.Tek Oct 16 '17 at 11:14
  • 1
    For me its working here's the updated Plunker http://plnkr.co/edit/AOlMD4diR0iRxPOUjm51?p=preview I have updated in style.css Though it will not be called as responsive but you can call it as adaptive – Krishna9960 Oct 16 '17 at 11:22
0

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);">
Must.Tek
  • 1,220
  • 10
  • 17