Height of tabContainers in dojo

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.

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?

In my HTML I have something like:

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

I then have then in the code:

require(["app/widgets/LoginForm"], function( loginForm){
  // Create the "application" object, and places them in the right spot.
  loginForm = new LoginForm( {} , 'loginForm');
  loginForm.startup();
});

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>

The CSS is as basic as it gets:

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

The only way I have to make the TabContainer actually appear is to have height:300px in it -- otherwise, the computed height is 0.

Is this how it's meant to be? Or am I doing something wrong?

回答1:

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.

回答2:

Just set the tab container to doLayout="false"

Detail example is here : https://dojotoolkit.org/reference-guide/1.7/dijit/layout/TabContainer.html#examples