Opened 6 years ago

Closed 6 years ago

#17531 closed defect (invalid)

Placing tab container inside Titlepane works in 1.6 version but not rendered properly in higher versions (1.7.2, 1.8.4 or 1.9.0)

Reported by: ramc Owned by:
Priority: undecided Milestone: tbd
Component: Dijit Version: 1.9.1
Keywords: Cc:
Blocked By: Blocking:

Description

Placing a tab container on title pane does not seem to work on 1.9 version. I have a sample code that works in if I use the dojo.js from 1.6 dojo version from google CDL but not correctly rendered in later versions.

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

<html> <head>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dijit/themes/claro/claro.css"> <style type="text/css">

html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #map{

padding:0;

}

</style>

<script type="text/javascript">

var djConfig = {

parseOnLoad: true

};

</script>

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/dojo.js"></script>

<script type="text/javascript">

dojo.require("dijit.dijit"); optimize: load dijit layer dojo.require("dijit.layout.BorderContainer?"); dojo.require("dijit.layout.ContentPane?"); dojo.require("dijit.TitlePane?"); dojo.require("dijit.layout.TabContainer?");

/*require(["dojo/dnd/move", "dojo/_base/declare", "dojo/dom-construct", "dijit/layout/TabContainer", "dijit/TitlePane", "dijit/layout/BorderContainer", "dojox/layout/ExpandoPane", "dojo/domReady!"]);*/

</script>

<script type="text/javascript">

dojo.ready( function() {

var titlePane = dijit.byId('one'); titlePane.closable = true; console.log('titlepane', titlePane);

});

</script>

</head>

<body class="claro">

<div dojotype="dijit.layout.BorderContainer?" design="headline" gutters="false" style="width:100%;height:100%;margin:0;">

<div dojotype="dijit.layout.ContentPane?" region="center" style="width:500px;height:500px; border:1px solid #000;padding:0;">

<div style="position:absolute;width:500px;height:500px; left:30px; top:10px; z-Index:999;">

<div id="titlepane" dojoType="dijit.TitlePane?" title="Show Tabs" closable="false" open="false">

<div id="tabContainer" dojoType="dijit.layout.TabContainer?" style="width:100%; height:100%">

<div id="one" dojoType="dijit.layout.ContentPane?" title="Tab 1" selected="true">

Tab 1 content

</div> <div id="two" dojoType="dijit.layout.ContentPane?" title="Tab 2">

Tab 2 content

</div> <div id="three" dojoType="dijit.layout.ContentPane?" closable="true" title="Tab 3">

Tab 3 content

</div>

</div>

</div>

</div> </div>

</div>

</body>

</html>

Change History (1)

comment:1 Changed 6 years ago by bill

Component: GeneralDijit
Resolution: invalid
Status: newclosed

You need to specify a height on the TabContainer?. You just said height:100% but that doesn't really mean anything.

Are you saying the TabContainer? should be 100% of the height of the TitlePane?? That's a circular definition because the TitlePane?'s height is determined by its contents.

Note: See TracTickets for help on using tickets.