Search code examples
javascriptcssdojodojo.gridx

How do I size my dijit/ConfirmDialog box appropriatly for my needs


I have a small web application that is 350px wide and 200px high. I have a dijit ConfirmDialog that is displayed when clicking a button. Without explicitly setting the dimensions of the dialog it sets itself larger than my application, so I have to resize the window to get to the Ok/Cancel buttons. When I try to set the dimensions and the dialog pops up, I see everything for 1 second then the text and buttons all disappear and I just have a empty box with Ok/Cancel buttons.

I discovered using overflow:auto in the style field allows everything to stay and adds scroll bars to the dialog. I then discovered that the .dijitDialogPaneContent is huge, even though I am setting the dimensions of the dialog box. Manually setting the sizes in my CSS is causing weird behavior of the dialog's components. How can I get my dialog and it's components sized correctly??

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();
                        });
                    }]
                ];
            }

Solution

  • ConfirmDialog should be automatically sized to fit within the viewport, without any custom application CSS.

    Probably you just need to get a new version of dojo. This sounds like the bug I fixed in https://bugs.dojotoolkit.org/ticket/18316.