Dojo 버튼 전체 높이 설정 방법

Question

Container ContentPane에 Dojo/Dijit 버튼 위젯을 추가하고 너비가 100 %가되도록하고 싶습니다. 나는 이것이 거의 사소한 것이어야한다고 생각하지만, 덧씌우 기를 overshooting하거나 엉망으로 만들지 않으면 서 일할 수있는 방법을 얻지 못했다. 내가있어 가장 가까운 스타일을

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 이것을 해결하기 위해 비 센터링 버튼 결과 (16px 좌우 모두) 바로 여분 16px을 제거하려면 CSS calc() 함수를 사용하여 각 측면에 8px의 padding이 있는지 확인할 필요 왼쪽 및 오른쪽 패딩은 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>

스 니펫