Responsive Dialog in Durandal 2.1?

Question

I found the following:

Responsive Durandal dialog

However I don't see any documentation on making the dialog responsive in 2.1. I have a dialog that extends in height as the user selects stuff - eventually the dialog gets taller than the viewport and there's no scroll or anything so it's a total mess on mobile devices. I've tried using the "reposition" functionality from the docs but this doesn't seem to do much. Any advice around this would be much appreciated.

        dialog.show('viewmodels/doThis', { data: data });
        addEditDialog.context.reposition('doThis'); // doesn't help

Answer 1

Try to read to set max-height CSS property and overflow-y auto

 .dialog { overflow: visible | hidden | scroll | auto | inherit } 

it looks like this:

 .dialog{
        max-height:480px; /* height of the device for example*/
        overflow-y:auto;  /* if the content is nore than max-height the scrollbar will show up*/
 }

or just use CSS media queries

@media (min-width: 1100px) {
  /*code for destop*/
  .dialog{

   }
}
@media (max-width: 1100px) {
/*code for ipad and netbooks*/
  .dialog{

   }
 }
@media (max-width: 480px) {
/*code for mobile here*/
   .dialog{

   }
}