如何调整dojo BorderContainer布局以处理旋转按钮？

Question

我正在尝试使用旋转按钮在应用程序左侧实现导航工具栏。当我使用css transform：rotate旋转按钮时，边框容器仍会执行所有布局计算，就像按钮没有旋转一样，因此它们最终重叠并垂直位于错误的位置。在我深入理解dijit / layout / utils模块以解决这个问题之前，我想知道是否有人已经有了我没有看到的解决方案。

谢谢！

在此处http://jsfiddle.net/eric_isakson/2bkKk/6/

JavaScript的：

require(["dojo/_base/window", "dijit/Toolbar", "dijit/form/Button", "dijit/layout/BorderContainer"], function(win, Toolbar, Button, BorderContainer) {
  var bc = new BorderContainer();
  bc.placeAt(win.body(), "last");
  var tb = new Toolbar({region: "leading"});
  bc.addChild(tb);
  var b1 = new Button({label: "button1"});
  tb.addChild(b1);
  var b2 = new Button({label: "button2"});
  tb.addChild(b2);
  bc.startup();
  tb.startup();
  b1.startup();
  b2.startup();
});

CSS

html, body {
width: 100%;
height: 100%;
margin: 0;
overflow:hidden;
}

.dijitBorderContainer {
width: 100%;
height: 100%;
}

.dijitButton {
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
display: block;
}

这是所需的外观：

Answer 1

如果我理解你的话，你想让你的按钮水平吗？ 然后，您只需要删除旋转的行。

.dijitButton {
display: block;
}

此致，Miriam