Dojo TabContainer doesn't get formatted correctly until after I do an Inspect Element - dojo

Question

I have a Dojo DataGrid with a few rows of data. When I click on a row, I have a TabContainer created in another <div>. Here's what it ends up looking like:
The formatting for the TabContainer is incorrect. However, after I do an "Inspect Element", the formatting corrects itself:
However, the Submit button disappears after the formatting is corrected.
Here's the code I use to create the DataGrid and TabContainer:
<div id="r_body">
<div id="r_list">
</div>
<div id="r_form">
<div data-dojo-type="dijit/form/Form" id="parameters_form" data-dojo-id="parameters_form" encType="multipart/form-data" action="" method="">
{% csrf_token %}
<div>
<div id="r_tab_container"></div>
</div>
<div>
<p></p>
<button id="submit_parameters" dojoType="dijit/form/Button" type="submit" name="submitButton" value="Submit">
Submit
</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
require([
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojox/grid/DataGrid" ,
"dojo/data/ItemFileWriteStore" ,
"dojo/dom",
"dojo/domReady!"
], function(BorderContainer, ContentPane, DataGrid, ItemFileWriteStore, dom){
// create a BorderContainer as the top widget in the hierarchy
var bc = new BorderContainer({
style: "height: 500px; width: 230px;"
}, "r_list");
/*set up data store*/
var data = {
identifier: "id",
items: []
};
data.items.push({ id: 'some_id', description: 'some_description',
var store = new ItemFileWriteStore({data: data});
/*set up layout*/
var layout = [[
{'name': 'Title', 'field': 'description', 'width': '200px', 'noresize': true}
]];
/*create a new grid*/
var r_list_grid = new DataGrid({
region: "left",
id: 'r_list_grid',
store: store,
structure: layout,
rowSelector: '0px'
});
bc.addChild(rt_list_grid);
bc.startup();
list_grid.on("RowClick", gridRowClick);
function gridRowClick(evt){
var idx = evt.rowIndex;
var rowData = list_grid.getItem(idx);
var r_url = rowData['url'][0];
var r_id = rowData['id'][0]
require(["dojo/dom", "dojo/request/xhr", "dojo/dom-form", "dijit/layout/TabContainer", "dijit/layout/ContentPane", "dojo/ready", "dojo/domReady!"],
function(dom, xhr, domForm, TabContainer, ContentPane, ready){
var url = window.location.pathname + "dev/" + r_id + "/" + r_url + "/";
xhr(url, {
method: "get"
}).then(
function(response){
var json_response = JSON.parse(response);
var fields_dict = json_response['fields_dict'];
var tc = new TabContainer({
style: "height: 100%; width: 100%;"
}, "r_tab_container");
for(var key in fields_dict) {
var content_string = '';
var fields = fields_dict[key];
for(var field in fields) content_string += '<div>' + field + '</div>';
var tcp = new ContentPane({
title: key,
content: content_string
});
tc.addChild(tcp);
}
tc.startup();
},
function(error){
//Error stuff
}
);
});
}
});
</script>
So what's going here and how do I fix the TabContainer formatting? Thanks!

Answer 1

I had to do a tc.resize(); after I do the tc.startup();