Как установить кнопку Dojo на всю ширину

Я хотел бы добавить виджет кнопки Dojo/Dijit в Container ContentPane и увеличить ширину на 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/

но это по-прежнему создает нецентрированную кнопку без отступов справа.

Любые намеки на то, что может исправить это, будут высоко оценены.


javascript css dojo dijit.form
person jrsmithy    schedule 01.12.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы должны заметить, что contentPane dijit имеет padding из 8px с каждой стороны (по 16 пикселей слева и справа), что приводит к нецентрирующей кнопке, чтобы решить эту проблему, просто используйте css calc() , чтобы удалить дополнительные 16px отступы слева и справа от ширины 100%.

См. ниже фрагмент

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();
});
.fullWidthButton {
  width:100%;
}

.fullWidthButton .dijitButtonNode {
  width :calc(100% - 16px);
}
<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>

person Spring    schedule 01.12.2017