如何根据需要适当调整 dijit/ConfirmDialog 框的大小

Posted 2023-02-26

【中文标题】如何根据需要适当调整 dijit/ConfirmDialog 框的大小

【英文标题】：How do I size my dijit/ConfirmDialog box appropriatly for my needs

【发布时间】：2015-02-19 07:51:49

【问题描述】：

我有一个 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();
                        );
                    ]
                ];
            

【问题讨论】：

您是否检查过其他定义的 css 类之一是否覆盖了您在创建对话框时设置的样式？

我没有任何与这些项目相关的 CSS 类。我定义的唯一其他 CSS 与按钮有关。

【参考方案1】：

ConfirmDialog 应自动调整大小以适应视口，无需任何自定义应用程序 CSS。

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