Opened 13 years ago

Closed 13 years ago

Last modified 12 years ago

#856 closed defect (fixed)

cannot create nested tabs in javascript in Safari

Reported by: sgendler@… Owned by: bill
Priority: high Milestone:
Component: Widgets Version: 0.3
Keywords: Cc:
Blocked By: Blocking:

Description

I don't know the source of the bug, but here is an example file which works fine in firefox and ie, but which fails to render the tabs inside pane3 in safari. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Report Grid Widget Demo</title>
        <script type="text/javascript">
            var djConfig = {isDebug: true};
        </script>
        <script src="js/dojo/dojo.js" type="text/javascript"></script>
        <script type="text/javascript">
            dojo.require("dojo.widget.*");
            dojo.require("dojo.widget.ContentPane");
            dojo.require("dojo.widget.TabContainer");

        dojo.addOnLoad(function(){

            var tabs = dojo.widget.createWidget("TabContainer", {}, dojo.byId("tabs"));
            var pane = dojo.widget.createWidget("ContentPane", {label:"pane1"});
            pane.domNode.appendChild(dojo.byId("pane1"));
            tabs.addChild(pane);

            var pane = dojo.widget.createWidget("ContentPane", {label:"pane2"});
            pane.domNode.appendChild(dojo.byId("pane2"));
            tabs.addChild(pane);

            var pane = dojo.widget.createWidget("ContentPane", {label:"pane3"});
            pane.domNode.appendChild(dojo.byId("pane3"));
            tabs.addChild(pane);
        });

        dojo.addOnLoad(function(){
            var tabs = dojo.widget.createWidget("TabContainer", {}, dojo.byId("tabs2"));

            var pane = dojo.widget.createWidget("ContentPane", {label:"pane4"});
            pane.domNode.appendChild(dojo.byId("pane4"));
            tabs.addChild(pane);

            var pane = dojo.widget.createWidget("ContentPane", {label:"pane5"});
            pane.domNode.appendChild(dojo.byId("pane5"));
            tabs.addChild(pane);
        });
            
        </script>
    </head>
    <body>

        <div id="tabs">
            <div id="pane1">
                content of pane 1
            </div>

            <div id="pane2">
                content of pane 2
            </div>

            <div id="pane3">
                content of pane 3
                <br/>

                <div id="tabs2">
                    <div id="pane4">
                        content of pane 4
                    </div>

                    <div id="pane5">
                        content of pane 5
                    </div>
                </div>

            </div>
        </div>

    </body>
</html>

Attachments (1)

test.html​ (2.3 KB) - added by sgendler@… 13 years ago.
attachment that is the same as pasted codeblock

Download all attachments as: .zip

Change History (4)

Changed 13 years ago by sgendler@…

Attachment: test.html​ added

attachment that is the same as pasted codeblock

comment:1 Changed 13 years ago by dylan

Component: General → Widgets
Milestone: → 0.5
Owner: changed from anonymous to bill

comment:2 Changed 13 years ago by bill

Milestone: 0.5 → 0.4
Resolution: → fixed
Status: new → closed

test_LayoutCode.html shows how to create tabs programatically; just tested in safari and it's working fine. The test case above is a little strange since you have a whole dom tree showing the tab layout; at most you need a single dom node for the top level TabContainer?, and then just cal createWidget() and addChild().

comment:3 Changed 12 years ago by (none)

Milestone: 0.4

Milestone 0.4 deleted

Note: See TracTickets for help on using tickets.