在道场tabContainers高度(Height of tabContainers in dojo

2019-07-30 20:50发布

我使用一个Dojo TabContainer的。 快速的问题:你有没有在CSS 指定像素的窗口小部件的大小,如果你正在处理一个Dojo容器? 从我所看到的,只有这样才能得到一个TabContainer的实际显示是通过CSS给它一个绝对的大小。

更新:我想通了,元素bodyhtml是缺少height的属性,因此它被计算为0。所以,现在如果我将它们设置为100%,我将展示的形式......但是,这将是巨大的! (只要页)。 我们的想法是要设置其高度,以auto ,所以它的“只要它需要”是......甚至可能吗?

在我的HTML我有这样的:

...
<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的是一个简单的基于模板的部件与下面的模板:

<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的实际出现的唯一途径是拥有height:300px的内容-否则,计算出的高度为0。

这是它是如何意思是什么? 还是我做错了什么?

Answer 1:

如果你的属性设置doLayout到在任的contentPane或TabContainer的虚假它会自动大小的高度的内容。 所述doLayout的dijit布局容器默认为true,然后需要特定高度的属性将被施加到它。



Answer 2:

就在标签的容器设置的doLayout =“假”

详细例子是在这里: https://dojotoolkit.org/reference-guide/1.7/dijit/layout/TabContainer.html#examples



文章来源: Height of tabContainers in dojo
标签: css layout dojo