Css dojo中tab容器的高度_Css_Layout_Dojo

Css dojo中tab容器的高度

css layout dojo

Css dojo中tab容器的高度,css,layout,dojo,Css,Layout,Dojo,我正在使用Dojo选项卡容器。快速问题：如果处理Dojo容器，是否必须在CSS中以像素为单位指定小部件大小？据我所见，让TabContainer实际显示的唯一方法是通过CSS给它一个绝对大小更新：我发现元素body和html缺少height属性，因此它被计算为0。所以，现在如果我将它们设置为100%，我将显示表单。。。但是，它将是巨大的！（与页面一样长）。其想法是将其高度设置为auto，这样它就“需要多长就多长”。。。这可能吗在我的HTML中，我有如下内容： ... <body&g

我正在使用Dojo选项卡容器。快速问题：如果处理Dojo容器，是否必须在CSS中以像素为单位指定小部件大小？据我所见，让TabContainer实际显示的唯一方法是通过CSS给它一个绝对大小

更新：我发现元素

body

和

html

缺少

height

属性，因此它被计算为0。所以，现在如果我将它们设置为100%，我将显示表单。。。但是，它将是巨大的！（与页面一样长）。其想法是将其高度设置为

auto

，这样它就“需要多长就多长”。。。这可能吗

在我的HTML中，我有如下内容：

...
<body>
  <div id="loginForm"> </div>
</body>
...

LoginForm是一个简单的基于模板的小部件，具有以下模板：

<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>

我必须使TabContainer实际显示的唯一方法是在其中包含

height:300px

——否则，计算的高度为0

这就是它的本意吗？还是我做错了什么？

如果在ContentPane或TabContainer上将属性

doLayout

设置为false，它将自动调整内容的高度。dijit布局容器的

doLayout

属性默认为true，然后需要对其应用特定的高度。

只需将选项卡容器设置为doLayout=“false”

具体例子如下：

我不能，不能对这个答案表示感谢。请大家评论一下。我在这上面浪费了太多时间。。。真的，谢谢。这确实改变了生活。这在哪里有记录？它肯定会在dojo文档中更加突出！谢谢，这就是我要找的！在Dojo中应该更好地记录这一点Docs@streetlight您可以在这里找到一些文档。

<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>

#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;
}