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:

initial load

The formatting for the TabContainer is incorrect. However, after I do an "Inspect Element", the formatting corrects itself:

after inspect element

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!

It looks like the TabContainer doesn't know the size of your DataGrid. Try to set a size on your DataGrid. — Philippe, Aug 07 '13 at 15:09
@Philippe I added `style: "height: 488px; width: 215px"` to the **DataGrid** declaration. Didn't fix it. — Di Zou, Aug 07 '13 at 15:35
Try to style your divs first too... I have a working example here : http://jsfiddle.net/psoares/TYw2Z/embedded/result/, also do some cleanup of your code because you have buggy ids on your grid (r_list_grid vs list_grid...) — Philippe, Aug 07 '13 at 16:12
@Philippe Ok, I'll see what I can do with my divs. The buggy ids are because I changed all the id names before I pasted the code in and missed some. — Di Zou, Aug 07 '13 at 16:58
Fixed it. I have to do a `tc.resize();` after I do the `tc.startup();`. Thanks! — Di Zou, Aug 07 '13 at 19:46
That's because some sizes are not set properly in your dom hierarchy at some point... causing your tabcontainer to need to call resize and compute the sizes after the content is set. — Philippe, Aug 07 '13 at 19:57
I added CSS sizes to all my divs and it still didn't work without the call to resize(). I eventually figured out that CSS from other parts of the parent templates that I'm supposed to use were interfering with this stuff somehow. When I rendered my page independent of everything, it came out fine. Once I nested it within another template it didn't format right without the resize. — Di Zou, Aug 07 '13 at 20:32

score 2 · Accepted Answer · answered Aug 30 '13 at 15:53

2

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

answered Aug 30 '13 at 15:53

Di Zou

4,469
13
59
88

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

1 Answers1