Responsive Dialog in Durandal 2.1?

|▌冷眼眸甩不掉的悲伤 提交于 2019-12-24 05:50:34

问题


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

回答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{

   }
}


来源:https://stackoverflow.com/questions/24394022/responsive-dialog-in-durandal-2-1

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!