[Dojo-checkins] [dojo] #5001: Using links breaks inner split pane in Firefox

dojo trac at dojotoolkit.org
Sat Nov 3 10:41:46 UTC 2007 

#5001: Using links breaks inner split pane in Firefox
-------------------+--------------------------------------------------------
 Reporter:  guest  |        Type:  defect
   Status:  new    |    Priority:  normal
Milestone:         |   Component:  Dijit 
  Version:  0.9    |    Severity:  major 
 Keywords:         |  
-------------------+--------------------------------------------------------
 We use a similar layout like the SplitLayoutExample from dmachi (see
 http://dojotoolkit.org/~dmachi/examples/SplitLayoutExample.html), the only
 difference is that the left navigation pane contains links to navigate
 through the contents in the bottom split area. This works in IE6 but
 breaks the layout of the inner split pane in FF 2.0.0.8 if the user ckicks
 on a link in the navigation pane. In order to demonstrate this I modified
 the SplitLayoutExample from dmachi:

 <head>
         <title>Split Layout Example</title>

         <script type="text/javascript" src="../dojo-0.9/dojo/dojo.js"
                 djConfig="isDebug: false, parseOnLoad: true"></script>
         <script type="text/javascript">
                 dojo.require("dijit.layout.SplitContainer");
                 dojo.require("dijit.layout.ContentPane");
                 dojo.require("dijit.layout.LayoutContainer");
                 dojo.require("dojo.parser");    // scan page for widgets
 and instantiate them
         </script>
         <style type="text/css">
                 @import "../dojo-0.9/dojo/resources/dojo.css";
                 @import "../dojo-0.9/dijit/themes/tundra/tundra.css";

                 body,html {
                         width:100%;
                         height: 100%;
                         padding: 0px;
                         margin: 0px;
                         overflow: hidden;
                 }

         </style>
 </head>

 <body class="tundra">

         <div dojoType="dijit.layout.LayoutContainer"
 style="width:100%;height:100%;">
                 <div dojoType="dijit.layout.ContentPane" layoutAlign="top"
 style="width: 100%; height: 50px; border: 1px solid #454545">
                         Header
                 </div>

                 <div dojoType="dijit.layout.SplitContainer"
 orientation="horizontal" sizerWidth="7" activeSizing="false"
 layoutAlign="client" style="border: 1px solid #454545;">
                         <div dojoType="dijit.layout.ContentPane"
 sizeMin="10" sizeShare="20" style="background-color:#efefef;">
                                 Left Navigation
 <ul>
 <li><a href="#target1">Target1</a></li>
 <li><a href="#target2">Target2</a></li>
 <li><a href="#target3">Target3</a></li>
 <li><a href="#target4">Target4</a></li>
 <li><a href="#target5">Target5</a></li>
 </ul>
                         </div>

                         <div dojoType="dijit.layout.SplitContainer"
 orientation="vertical" sizeMin="20" sizeShare="80" sizerWidth="7"
 activeSizing="false" style="background-color: #efefef">
                                 <div dojoType="dijit.layout.ContentPane"
 style="background-color: #ababab" sizeShare="90">
                                         Lorem ipsum dolor sit amet,
 consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
 dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
 nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor
 sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
 ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
 aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
 fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
 sunt in culpa qui officia deserunt mollit anim id est laborum .Lorem ipsum
 dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
 incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
 nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
 non proident, sunt in culpa qui officia deserunt mollit anim id est
 laborum.
                                 </div>

                                 <div dojoType="dijit.layout.ContentPane"
 style="background-color: #898989" sizeShare="10">
                                         Bottom Split Area
 <a id="target1">Target 1</a>
                                         Lorem ipsum dolor sit amet,
 consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
 dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
 nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor
 sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
 ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
 aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
 fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
 sunt in culpa qui officia deserunt mollit anim id est laborum .Lorem ipsum
 dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
 incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
 nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
 non proident, sunt in culpa qui officia deserunt mollit anim id est
 laborum.

 <a id="target2">Target 2</a>
                                         Lorem ipsum dolor sit amet,
 consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
 dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
 nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor
 sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
 ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
 aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
 fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
 sunt in culpa qui officia deserunt mollit anim id est laborum .Lorem ipsum
 dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
 incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
 nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
 non proident, sunt in culpa qui officia deserunt mollit anim id est
 laborum.

 <a id="target3">Target 3</a>
                                         Lorem ipsum dolor sit amet,
 consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
 dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
 nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor
 sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
 ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
 aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
 fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
 sunt in culpa qui officia deserunt mollit anim id est laborum .Lorem ipsum
 dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
 incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
 nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
 non proident, sunt in culpa qui officia deserunt mollit anim id est
 laborum.

 <a id="target4">Target 4</a>
                                         Lorem ipsum dolor sit amet,
 consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
 dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
 nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor
 sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
 ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
 aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
 fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
 sunt in culpa qui officia deserunt mollit anim id est laborum .Lorem ipsum
 dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
 incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
 nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
 non proident, sunt in culpa qui officia deserunt mollit anim id est
 laborum.

 <a id="target5">Target 5</a>
                                         Lorem ipsum dolor sit amet,
 consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
 dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
 nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor
 sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
 ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
 aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
 fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
 sunt in culpa qui officia deserunt mollit anim id est laborum .Lorem ipsum
 dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
 incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
 nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
 non proident, sunt in culpa qui officia deserunt mollit anim id est
 laborum.

                                 </div>
                         </div>
                 </div>

         </div>
 </body>

-- 
Ticket URL: <http://trac.dojotoolkit.org/ticket/5001>
dojo <http://dojotoolkit.org/>
The Dojo UI Toolkit

More information about the Dojo-checkins mailing list