Question

我有一个dijit / Dialog，它通常在浏览器窗口大小> 1102px时显示，但尺寸小于它的行为异常。我已经发现原因是JS正在增加固定的高度和更小的浏览器宽度（以及在子节点上的一些额外的绝对定位）。有人可以解释为什么存在这种情况或如何防止它设置这些高度/绝对定位（最好不要只使用！重要的样式到处都是）。或者，我是否误读，还有另一个原因正在发生？

我能够让一名侦察员证明这种情况发生了。如果你在plunker小部件＆lt; 1105px时加载它，当你查看开发工具时你会看到一个固定的高度，但是如果你在弹药大于> 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以在新的浏览器宽度重新加载对话框。只是在对话框打开时更改浏览器大小不会导致固定高度显示/消失

Answer 1

Documentation说：

默认情况下，对话框会根据其内容自行调整大小，就像普通<div>一样。如果内容对于屏幕而言太大，则Dialog将自动添加滚动条。

因此，您通常不需要为对话框设置显式大小。如果你愿意，那么你需要将宽度/高度添加到对话框中的里面，或者在.dijitDialogPaneContent div上设置一个大小：

您的示例在Dialog上设置width属性，如何在<{3}}中显示

Answer 2

要解决此问题，您可以使用对话框css属性将宽度大小修复为blow snippet：

override func perform() {
        let sourceVC = self.source
        let destinationVC = self.destination
        let view : UIView = UIView()
        view.frame = CGRect(x: sourceVC.view.frame.size.width, y: 0, width: sourceVC.view.frame.size.width, height: sourceVC.view.frame.size.height)
        view.addSubview(destinationVC.view)
        sourceVC.view.addSubview(view)

        UIView.animate(withDuration: 2, animations: {
            sourceVC.view.transform =
                CGAffineTransform(translationX: -sourceVC.view.frame.size.width, y: 0);

        }) { completion in
            view.removeFromSuperview()
            sourceVC.present(destinationVC, animated: false, completion: nil)
        }
    }

在工作代码段上方

.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;
}

dijit / Dialog在小窗口大小上设置高度

2 个答案: