[Dojo-checkins] [dojo] #10327: DOCTYPE BorderContainer Layout within templated widget

Fri Nov 13 07:19:21 EST 2009

#10327: DOCTYPE BorderContainer Layout within templated widget
----------------------------------------------------------------+-----------
 Reporter:  Erikk                                               |        Owner:  bill  
     Type:  defect                                              |       Status:  new   
 Priority:  normal                                              |    Milestone:  tbd   
Component:  Dijit                                               |      Version:  1.4.0b
 Severity:  normal                                              |   Resolution:        
 Keywords:  DOCTYPE, layout, BorderContainer, template, widget  |  
----------------------------------------------------------------+-----------
Changes (by bill):

  * owner:  anonymous => bill
  * component:  General => Dijit

Old description:

> 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 "-//W3C//DTD HTML
> 4.01//EN" "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>
> }}}

New description:

 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 "-//W3C//DTD HTML
 4.01//EN" "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>
 }}}

--

Comment:

 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.

-- 
Ticket URL: <http://bugs.dojotoolkit.org/ticket/10327#comment:1>
dojo <http://dojotoolkit.org/>
The Dojo UI Toolkit