CODEWITHSUNDEEP
javascriptcssdojodijit.form
jrsmithy
jrsmithy

Reputation: 21

How to set Dojo button full width

I would like to add a Dojo/Dijit button widget in a Container ContentPane and have the width take up 100%. I think this should be almost trivial, but have completely failed to get any method to work while not overshooting or messing up the padding. The closest I've got is to set style

  fullWidthButton. .dijitButtonNode { width:100%; }

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

and add the button as

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

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

but this still produces a non-centered button with no padding on the right.

Any hints to what could fix this would be much appreciated.

Upvotes: 2

Views: 337

Answers (1)

Bourbia Brahim
Bourbia Brahim

Reputation: 14702

You have to notice that the contentPane dijit has padding of 8px in each side (16px both left and right ), which results the non centering button to solve this , just use the css calc() function , to remove the extra 16px left and right padding from 100% width.

See below snippet

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>

Upvotes: 1

Related Questions