Opened 12 years ago

Closed 12 years ago

#6055 closed defect (fixed)

Grid does not work inside layout.ContentPane

Reported by: guest Owned by: sorvell
Priority: high Milestone:
Component: DojoX Grid Version: 1.0
Keywords: Cc:
Blocked By: Blocking:

Description

Hi

In the 1/3/2008 nightly build I notice that my programmatic grids stop to work in all my program. In the 29/2/2008 nightly build all the grids are displayed OK. (My grids are all surrounded by contentPane and inside BorderContainers?)

I took the test_tundra_edit.html test and surrounded the grid with a ContentPane? thes e are my findings:

Safari 3 : The grid is not displayed at all (nighly build 29/2). Firefox 2: The grid is displayed inside the content pane (nighly build 29/2). IE7: the contentPane start to display and crash immediately (nighly build 29/2). Safari 3 : The grid is not displayed at all (nighly build 1/3). Firefox 2: The grid is not displayed at all (nighly build 1/3). <-- * IE7: the contentPane start to display and crash immediately (nighly build 1/3).

With my programmatic way it is different:

The HTML is:

<div dojoType="dijit.layout.BorderContainer"  liveSplitters="false" persist="true"
          id="verticalSplitParam" design="headline" style="width: 100%; height: 100%;">

  <div dojoType="dijit.layout.ContentPane" id="buttons" region="top" 
            splitter="true"  class="treeContainerSplit"   style="width: 100%; height: 10%;">  
  
     <form dojoType="dijit.form.Form" id="thebutton" action="">
        <button dojoType="dijit.form.Button" id="Memberadd"
            onclick="javascript:addmembers()">{ADDMEMBER}</button>
	    <button dojoType="dijit.form.Button" id="Membercopy"
            onclick="javascript:displayProjects()">{COPYALLUSR}</button>
     </form>

  </div>

  <div dojoType="dijit.layout.ContentPane" id="gridContainer1" region="center" 
                      splitter="true"  class="treeContainerSplit"> 
      <div id="gridDiv"></div>
  </div>
</div>

The Javascript is:

modelMember = new dojox.grid.data.Table(null, theData);

      if(gridMember){
        gridMember.destroy();
        gridMember=null;
      }

      gridMember = new dojox.Grid({
                "id": "table",
                "class":"membersGrid",
                "model": modelMember,
                "structure": memberLayout,
                "noscroll":true,
                "autoWidth":true});

      dojo.byId("gridDiv").appendChild(gridMember.domNode);
      dojo.byId("gridContainer1").style.display="";

      gridMember.render();

The grids are displayed OK in all the browsers with the 29/2 version and are displayed minimized with the 1/3 version.

With the 3/1/2008 nightly build (in object:gridMember.domNode - see above):

clientWidth =52 clientHeight =0 offsetWidth =58 offsetHeight =6

With the 29/2/2008 nightly build:

clientWidth =744 clientHeight =400 offsetWidth =750 offsetHeight =406

I think that both HTML and Programmatic problem are related (may be the sizes are not propagated to the grid, or something like this - but you are the expert :)

Please write me if you need some more information from me. (I attached an example html file modified from the test_tundra) Remove the contentPanes and BorderContainer? and voila! you will see the grid.

Eduardo

Attachments (2)

test_tundra_edit-edu.html (5.4 KB) - added by guest 12 years ago.
HTML Grid inside ContentPane? - example problem
test_tundra_edit-edu2.html (4.1 KB) - added by sorvell 12 years ago.
Simplified version of test that should be working properly

Download all attachments as: .zip

Change History (7)

Changed 12 years ago by guest

Attachment: test_tundra_edit-edu.html added

HTML Grid inside ContentPane? - example problem

comment:1 Changed 12 years ago by guest

In the above code example the class is:

.membersGrid {
    border: 3px double #888;
    margin:2px;
    height:400px;
}

comment:2 Changed 12 years ago by guest

Additional information:

with an additional: style="width:1000px; height: 700px;" inside: <div id="gridDiv">

The grid appears. Equivalent settings inside the css (class:membersGrid) has no effect. This in my humble opinion is wrong. The class parameter in the grid creation need to effect and even be stronger than any definition in the html.

Something changed in the last nightly builds and affected this behavior.

thanks

Eduardo

comment:3 Changed 12 years ago by guest

Hi

Please sorry, even if something changed, I can not define this as a bug. You can close this PR. The grid is working as usual if height and width is given to the div in html. Of course it will be highly desirable if the sizing and positioning of the grid will in the future behave like any other widget in Dijit.

Eduardo

comment:4 Changed 12 years ago by sorvell

Thanks for posting, but if possible, the bug should have the minimum information to describe unexpected behavior. There is so much information here that it is very hard to follow.

Focusing on the attached file, there is an issue with how the BorderContainer? is defined. It is set to height: 100%.

First, if this is done, it looks like the html and body must be manually made to be 100% height (see /dijit/tests/layout/test_BorderContainer_full.html).

Second, this appears to be a simple css height value so if the BorderContainer? is 100% height, that will basically be 100% of its parent node's height. If there are other elements in the parent node, as in your example, unexpected sizing will occur.

Changed 12 years ago by sorvell

Attachment: test_tundra_edit-edu2.html added

Simplified version of test that should be working properly

comment:5 Changed 12 years ago by sorvell

Resolution: fixed
Status: newclosed
Note: See TracTickets for help on using tickets.