3

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?

JSW189
  • 6,267
  • 11
  • 44
  • 72
Merc
  • 16,277
  • 18
  • 79
  • 122

2 Answers2

27

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.

BuffaloBuffalo
  • 7,703
  • 4
  • 28
  • 29
  • 2
    I cannot, cannot express my gratitude for this answer. Everybody please comment this UP UP UP. I wasted way too much time on this... really, thank you. – Merc Aug 10 '12 at 01:23
  • 1
    This is literally LIFE CHANGING. Where is this documented? It should definitely be more prominent in the dojo docs! – streetlight Mar 20 '14 at 11:50
  • 1
    Thanks this is what I was looking for! This really should be documented better in the Dojo Docs – Jeremy Hamm Jul 01 '14 at 16:26
  • @streetlight You can find some documentation here. http://dojotoolkit.org/reference-guide/1.10/dijit/layout/TabContainer-examples.html – Gaurav Ramanan Dec 10 '14 at 20:37
0

Just set the tab container to doLayout="false"

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

UI dev www.bijudesigner.com
  • 1
  • 1