Opened 9 years ago

Closed 9 years ago

Last modified 9 years ago

#10327 closed defect (invalid)

DOCTYPE BorderContainer Layout within templated widget

Reported by: Erikk Owned by: bill
Priority: high Milestone: tbd
Component: Dijit Version: 1.4.0b
Keywords: DOCTYPE, layout, BorderContainer, template, widget Cc:
Blocked By: Blocking:

Description (last modified by bill)

Hello,

When creating a widget from a template with a BorderContainer layout inside the template, the widget would not display at all on :

  • Firefox
  • Safari
  • Opera
  • Chrome

unless I remove the DOCTYPE line (<!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01EN" "http://www.w3.org/TR/html4/strict.dtd">).

On IE6, IE7 and IE8 it works both with or without DOCTYPE.

Here is the source code for the page :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title>Dojo example</title>
      <style type="text/css">
        @import "../js/dojotoolkit/dijit/themes/tundra/tundra.css";
      </style>
      
      <style type='text/css'>
        body, html {
          width:100%; height:100%; margin:0; padding:0;
        }
      </style>

      <script type="text/javascript" src="../js/dojotoolkit/dojo/dojo.js" 
              djConfig="parseOnLoad:false, isDebug: false"></script>        
      <script type="text/javascript">
          
      dojo.require( "dijit.layout.BorderContainer" );
      dojo.require( "dijit.layout.ContentPane" );
      dojo.require( "dijit._Widget" );
      dojo.require( "dijit._Templated" );
      dojo.require("dojo.parser");
          
      dojo.addOnLoad(function() {
      
        dojo.declare("test.Test",
                     [dijit._Widget, dijit._Templated], {
                     templateString: '<div>' + 
                                     '<div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true" liveSplitters="true" id="borderContainer" style="height:100%; width:100%;">' +
                                     '<div dojoType="dijit.layout.ContentPane" splitter="true" region="leading" style="width: 100px;">Hi</div>' +
                                     '<div dojoType="dijit.layout.ContentPane" splitter="true" region="center">Hi, I am center</div>' +
                                     '</div>' +
                                     '</div>',
                     widgetsInTemplate : true
        }); 

        dojo.parser.parse();
        
        var _appli = new test.Test({}, dojo.byId("test"));  
        _appli.startup();
      
      });
    
    </script>
  </head>
   
  <body class="tundra">
        
    <div id="test"></div>
        
  </body>
</html>

Attachments (2)

test.html (1.9 KB) - added by Erikk 9 years ago.
simple.html (403 bytes) - added by bill 9 years ago.
non-dojo test case showing problem

Download all attachments as: .zip

Change History (5)

Changed 9 years ago by Erikk

Attachment: test.html added

comment:1 Changed 9 years ago by bill

Component: GeneralDijit
Description: modified (diff)
Owner: changed from anonymous to bill

I'll take a look.

I think there are some cases where the templated (widgetsInTemplate) widget needs to act as a layout widget, calling resize() on it's contained widgets... because otherwise the contained widgets try to size themselves too soon, while they are hidden. This doesn't seem like one of those cases though.

comment:2 Changed 9 years ago by bill

Resolution: invalid
Status: newclosed

Turns out this has nothing to do with BorderContainer or templated widgets... it's not even related to dojo.

Your code is basically:

<body style="height: 100%">
    <div>
          <div style="height: 100%">...</div>
    </div>
</body>

You are expecting the height: 100% to refer to the height of the <body>, but apparently it refers to the outer <div>, even though that <div> isn't position: relative. Of course that makes a circular definition since the outer <div>'s height is just enough to hold the inner <div>.

I'm kind of surprised it works that way too, but anyway I'll attach a test case showing how this fails even w/out dojo.

Changed 9 years ago by bill

Attachment: simple.html added

non-dojo test case showing problem

comment:3 Changed 9 years ago by Erikk

Thank you ! My mistake !

Actually at first I didn't put in the outer <div> but had the BorderContainer? div as the outermost div. It didn't work. Then I saw another ticket where the proposed solution was to add an outer <div>. I didn't think at all of moving the height style up to the new outer div.

Anyway thank you for your time !

Note: See TracTickets for help on using tickets.