javascript - 如何根据需要适当调整 dijit/确认对话框的大小

标签 javascript css dojo dojo.gridx

我有一个 350 像素宽和 200 像素高的小型 Web 应用程序。我有一个单击按钮时显示的 dijit ConfirmDialog。如果没有明确设置对话框的尺寸,它会将自己设置得比我的应用程序大,所以我必须调整窗口大小才能找到“确定”/“取消”按钮。当我尝试设置尺寸并弹出对话框时,我看到了 1 秒钟的所有内容,然后文本和按钮都消失了,我只有一个带有确定/取消按钮的空框。

我发现在样式字段中使用 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 应自动调整大小以适应视口(viewport),无需任何自定义应用程序 CSS。

可能您只需要获取新版本的 dojo。这听起来像是我在 https://bugs.dojotoolkit.org/ticket/18316 中修复的错误.

关于javascript - 如何根据需要适当调整 dijit/确认对话框的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28601071/

相关文章:

javascript - Div 垂直对齐不适用于 Chrome - 适用于其他浏览器

html - CSS网格中的重叠图像

javascript - Dojo dGrid 标题复选框选择全部不起作用

javascript - 在 Firefox 中单击鼠标时无法选择所有输入元素文本

javascript - 道场查询 : attribute not equal

javascript - 列 Highcharts 中的渐变

javascript - 传单:每个标记上的自动打开弹出窗口

javascript - 如何迭代 Map() 对象?

jquery - 从 iFrame 更改父窗口 URL

html - 媒体查询根本不起作用