dijit /对话框设置小窗口尺寸的高度
问题描述:
我有一个dijit /对话框,通常在浏览器窗口大小> 1102px时显示,但尺寸小于它的行为异常。我发现原因是JS增加了固定的高度和较小的浏览器宽度(以及对子节点的一些额外的绝对定位)。有人可以解释为什么这存在或者如何防止它设置那些高度/绝对位置(最好不需要在任何地方使用!重要的样式)。或者,我是否在误读,还有另一个原因正在发生?dijit /对话框设置小窗口尺寸的高度
我能够做出显示发生这种情况的重击者。如果在plunker小部件为< 1105px时加载它,当您查看开发工具时会看到固定高度,但如果在plunker> 1105px时加载它,则不会看到固定高度。
https://plnkr.co/edit/JCY0qRzXPIwNIAUgVOFM?p=preview
require (['dojo/parser', 'dojo/domReady', 'dijit/Dialog'],
function (parser, ready, Dialog) {
ready(function() {
var dialog = new Dialog({title: "Random Title", style: 'width: 990px;'});
dialog.set("content", "hello");
dialog.show();
parser.parse();
});
return {};
});
注意:你必须重新加载(停止然后运行)的plunker在新的浏览器宽度重新加载对话框。只是改变了浏览器的大小,而对话框打开不会导致固定的高度来显示/消失
答
默认大小本身的对话框根据其内容,就像一个普通的
<div>
。如果内容对于屏幕来说太大,那么Dialog会自动添加一个滚动条。因此,您通常不需要为对话框设置显式大小。如果你想,那么你就需要宽/高在.dijitDialogPaneContent DIV添加到一个div 内对话框,或设置大小:
你举的例子在对话框设置width属性,如何设置它里面在this example
答
所示。为了解决这个problème您可以使用此对话框CSS属性固定宽度尺寸为打击片断:上述工作剪断
.dijitLayoutContainer {
width: 990px !important;
}
// set some spacing from parent
.dijitDialogTitleBar,.dijitDialogPaneContent {
width: 980px !important;
}
宠物
require (['dojo/parser', 'dojo/domReady', 'dijit/Dialog'],
function (parser, ready, Dialog) {
ready(function() {
var dialog = new Dialog({title: "Random Title", style: 'width: 990px;'});
dialog.set("content", "hello");
dialog.show();
parser.parse();
});
return {};
});
.dijitLayoutContainer {
width: 990px !important;
}
/*to make spacing right nd left */
.dijitDialogTitleBar,.dijitDialogPaneContent {
width: 980px !important;
}
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.3/dojo/dojo.js"></script>
<body class="claro">
</body>