如何根据我的需要适当调整 dijit/ConfirmDialog 框的大小
How do I size my dijit/ConfirmDialog box appropriatly for my needs
我有一个 350 像素宽和 200 像素高的小型 Web 应用程序。我有一个单击按钮时显示的 dijit ConfirmDialog。如果没有明确设置对话框的尺寸,它会将自己设置得比我的应用程序大,所以我必须调整 window 的大小才能找到 Ok/Cancel 按钮。当我尝试设置尺寸并弹出对话框时,我看到所有内容 1 秒,然后文本和按钮全部消失,我只有一个带有 Ok/Cancel 个按钮的空框。
我发现在样式字段中使用 overflow:auto
可以保留所有内容并向对话框添加滚动条。然后我发现 .dijitDialogPaneContent 很大,即使我正在设置对话框的尺寸。在我的 CSS 中手动设置大小会导致对话框组件出现奇怪的行为。我怎样才能使我的对话框及其组件大小正确?
CSS:
.dijitDialogTitleBar {
height: 25px !important;
width: 150px !important;
}
.dijitDialogPaneActionBar {
height: 35px !important;
width: 150px !important;
}
.dijitDialogPaneContent {
height: 150px !important;
width: 150px !important;
}
Javascript:
getCellWidgetConnects: function(cellWidget, cell){
// return an array of connection arguments
return [
[cellWidget.startStopBtn, 'onClick', function(e){
require(["dijit/ConfirmDialog","gridx/Grid", "dojo/domReady!"], function(ConfirmDialog,Grid){
var feedName = grid.model.store.get(cell.row.id).feedname;
var dContent = "Starting: " + feedName + "?";
myDialog = new ConfirmDialog({
title: "Confirm Start",
content: dContent,
style: "overflow:auto; width: 200px; height: 150px;", // height 150px works for the buttons
onExecute:function(){ //Callback function
console.log("Event Started");
restServices.sendStatusChangeStartStop(cell.row.id);
},
onCancel:function(){
console.log("Event Cancelled")
}
});
myDialog.show();
});
}]
];
}
ConfirmDialog 应自动调整大小以适合视口,无需任何自定义应用程序 CSS。
可能您只需要获取新版本的 dojo。这听起来像是我在 https://bugs.dojotoolkit.org/ticket/18316.
中修复的错误
我有一个 350 像素宽和 200 像素高的小型 Web 应用程序。我有一个单击按钮时显示的 dijit ConfirmDialog。如果没有明确设置对话框的尺寸,它会将自己设置得比我的应用程序大,所以我必须调整 window 的大小才能找到 Ok/Cancel 按钮。当我尝试设置尺寸并弹出对话框时,我看到所有内容 1 秒,然后文本和按钮全部消失,我只有一个带有 Ok/Cancel 个按钮的空框。
我发现在样式字段中使用 overflow:auto
可以保留所有内容并向对话框添加滚动条。然后我发现 .dijitDialogPaneContent 很大,即使我正在设置对话框的尺寸。在我的 CSS 中手动设置大小会导致对话框组件出现奇怪的行为。我怎样才能使我的对话框及其组件大小正确?
CSS:
.dijitDialogTitleBar {
height: 25px !important;
width: 150px !important;
}
.dijitDialogPaneActionBar {
height: 35px !important;
width: 150px !important;
}
.dijitDialogPaneContent {
height: 150px !important;
width: 150px !important;
}
Javascript:
getCellWidgetConnects: function(cellWidget, cell){
// return an array of connection arguments
return [
[cellWidget.startStopBtn, 'onClick', function(e){
require(["dijit/ConfirmDialog","gridx/Grid", "dojo/domReady!"], function(ConfirmDialog,Grid){
var feedName = grid.model.store.get(cell.row.id).feedname;
var dContent = "Starting: " + feedName + "?";
myDialog = new ConfirmDialog({
title: "Confirm Start",
content: dContent,
style: "overflow:auto; width: 200px; height: 150px;", // height 150px works for the buttons
onExecute:function(){ //Callback function
console.log("Event Started");
restServices.sendStatusChangeStartStop(cell.row.id);
},
onCancel:function(){
console.log("Event Cancelled")
}
});
myDialog.show();
});
}]
];
}
ConfirmDialog 应自动调整大小以适合视口,无需任何自定义应用程序 CSS。
可能您只需要获取新版本的 dojo。这听起来像是我在 https://bugs.dojotoolkit.org/ticket/18316.
中修复的错误