Durandal 2.1中的响应对话框? [英] Responsive Dialog in Durandal 2.1?

问题描述

我发现了以下内容:

响应式Durandal对话框

但是，在2.1中，我看不到任何有关使对话框具有响应性的文档.我有一个对话框，该对话框的高度随着用户选择内容而扩展-最终，该对话框变得比视口高，并且没有滚动或其他任何内容，因此在移动设备上完全是一团糟.我已经尝试过使用文档中的重新定位"功能，但这似乎没有多大作用.对此的任何建议将不胜感激.

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

推荐答案

尝试阅读以设置最大高度CSS属性和溢出-y 自动

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

它看起来像这样:

 .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*/
 }

或仅使用 CSS媒体查询

@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{

   }
}

这篇关于Durandal 2.1中的响应对话框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！