dojo中tabContainers的高度 [英] Height of tabContainers in dojo
问题描述
我使用的是Dojo tabcontainer。
快速问题：如果你正在处理一个Dojo容器，你是否需要在CSS中以像素指定widget尺寸？
从我所看到的，获取TabContainer实际显示的唯一方法是通过CSS给它一个绝对大小。
I am using a Dojo tabContainer. The quick question: do you have to specify the widget size in pixel in the CSS, if you are dealing with a Dojo container? From what I am seeing, the only way to get a TabContainer to actually show is by giving it an absolute size via CSS.
更新： c> c> c> c> / code>属性，因此它被计算为0.所以，现在如果我将它们设置为100％，我将显示形式...但是，它将是巨大的！ （只要页面）。这个想法是将它的高度设置为 auto ，所以它是只要它需要...是可能的？
UPDATE: I figured out that the elements body and html were missing the height attribute, and therefore it was computed to 0. So, now if I set them as 100% I will display the form... but, it will be huge! (as long as the page). The idea is to set its height to auto, so that it's "as long as it needs to be"... is that even possible?
在我的HTML中，我有类似的：
In my HTML I have something like:
...
<body>
<div id="loginForm"> </div>
</body>
...
然后我在代码中：
require(["app/widgets/LoginForm"], function( loginForm){
// Create the "application" object, and places them in the right spot.
loginForm = new LoginForm( {} , 'loginForm');
loginForm.startup();
});
LoginForm是一个简单的基于模板的小部件，具有以下模板：
LoginForm is a simple template-based widget with the following template:
<div data-dojo-attach-point="tabContainer" data-dojo-type="app.TabFading" data-dojo-props="tabPosition:'top'" style="height:100%">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-attach-point="loginPane" data-dojo-props="title: 'Login'">
<form data-dojo-type="dijit.form.Form" data-dojo-attach-point="loginForm" method="POST">
<label for="${id}_login">Login</label>
<input name="login" id="${id}_login" data-dojo-attach-point="login" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="required:true"/>
<label for="${id}_password">Password</label>
<input name="password" id="${id}_password0" data-dojo-attach-point="password" data-dojo-type="app.ValidationPassword" />
<input type="submit" data-dojo-attach-point="button" data-dojo-type="app.BusyButton" label="Login!" />
</form>
</div>
</div>
</div>
CSS是基本的：
#loginForm {
width: 300px;
margin: 0 auto;
padding: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
/*** Background Gradient - 2 declarations one for Firefox and one for Webkit ***/
background: -moz-linear-gradient(19% 75% 90deg,#FCFCFC, #CCCCCC);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FCFCFC), to(#CCCCCC));
/*** Shadow behind the box ***/
-moz-box-shadow:0px -5px 300px #a9a0a0;
-webkit-box-shadow:0px -5px 300px #a9a0a0;
}
body {
background-color: #fcfcfc;
font: 9pt/1.5em Helvetica Neue, Helvetica, Arial, sans-serif;
margin: 0 0;
}
我必须使TabContainer实际出现的唯一方法是让< c $ c> height：300px ，否则计算的高度为0.
The only way I have to make the TabContainer actually appear is to have height:300px in it -- otherwise, the computed height is 0.
这是怎么回事？
推荐答案
如果设置属性 doLayout 为false在ContentPane或TabContainer它应该自动调整高度的内容。 dijit布局容器的 doLayout 属性默认为true，然后需要应用特定的高度。
If you set the property doLayout to false on either the ContentPane or the TabContainer it should automatically size the height to the content. The doLayout property of the dijit layout containers defaults to true, which then requires a specific height to be applied to it.
这篇关于dojo中tabContainers的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
