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

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();