Question

我想在Container ContentPane中添加Dojo / Dijit按钮小部件，宽度占用100％。我认为这应该是微不足道的，但完全没有得到任何方法工作，而不是超载或搞乱填充。我最接近的是设置风格

  fullWidthButton. .dijitButtonNode { width:100%; }

  .dijitButton.fullWidthButton {
    display: block;
  }
  .dijitButton.fullWidthButton .dijitButtonNode {
    width: 100%;
  }

并将按钮添加为

<button class="fullWidthButton" data-dojo-type="dijit/form/Button" type="button">Button</button>

https://jsfiddle.net/Lyox5rwt/4/

但是这仍然会产生一个非居中的按钮，右边没有填充。

任何可以解决这个问题的提示都会非常感激。

Answer 1

您必须注意contentPane dijit每侧padding 8px（左右16px），这导致非居中按钮要解决此问题，只需使用css calc()函数，即可从16px宽度中删除额外的100%左右填充。

见下面的代码段

＆＃13;

require(["dijit/layout/BorderContainer","dijit/layout/ContentPane", "dijit/form/Button","dojo/parser","dijit/registry", "dojo/dom-style", "dojo/domReady!"], function(BorderContainer,ContentPane, Button,parser,registry,domStyle) {
  parser.parse();
});

＆＃13;

.fullWidthButton {
  width:100%;
}

.fullWidthButton .dijitButtonNode {
  width :calc(100% - 16px);
}

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>
<div class="claro">
  <div id="appLayout" style="min-height:200px;" data-dojo-type="dijit/layout/BorderContainer">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
      <button id="btn" class="fullWidthButton" data-dojo-type="dijit/form/Button"  type="button">Button</button>
    </div>
  
  </div>
</div>

＆＃13;

如何设置Dojo按钮的全宽

1 个答案: