dojo grid doesn't work inside div

StackOverflow https://stackoverflow.com/questions/16981212

Frage

Enclosing <div id="grid1"></div> inside <div></div> makes it disappear.

In the simple code below Datagrid behaves perfectly well until enclosed in an extra div.

This works:

http://jsfiddle.net/pfvEa/

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/resources/dojo.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojox/grid/resources/claroGrid.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dijit/themes/claro/claro.css" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js"></script>
<script>
require([
    "dojo/store/Memory",
    "dojo/data/ObjectStore",
    "dojox/grid/DataGrid",
    "dojo/domReady!"
], function(Memory, ObjectStore, DataGrid){
    data = [
        { abbr:'ec', name:'Ecuador', capital:'Quito' },
        { abbr:'ec1', name:'Ecuador1', capital:'Quito1' }
    ];
    var objectStore = new Memory({
        data: data
    });
    grid = new DataGrid({
        store: ObjectStore({objectStore: objectStore}),
        structure: [
            {name:"Country", field:"name", width: "150px"},
            {name:"Abbreviation", field:"abbr"},
            {name:"Capital", field:"capital"}
        ]
    }, "grid1");
    grid.startup();
});
</script>
</head>
<body class="claro">
before
<div id="grid1"></div>
after
</body>
</html>

This doesn't work:

http://jsfiddle.net/ssMG4/

<body class="claro">
before
<div>
  <div id="grid1"></div>
</div>
after
</body>

It applies to dojo v1.8, 1.9 and even 1.6.

What am I doing wrong?

War es hilfreich?

Lösung

Fixed the issue!

http://jsfiddle.net/pfvEa/1/

All I had to do was to add these lines of code

#grid1
{
    height: 20em;
}

Update (by ahatchkins) on why this is necessary. Quote from the docs:

The main reason for this is the “dynamic” nature of the grid itself. The grid needs to start laying itself out before it has any data - so it does not have a way to “know” how wide to draw the columns - because we don’t have the data. Depending on the browser, we are able to make a “best guess” - but it doesn’t work in all situations.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top