Opened 11 years ago

Closed 11 years ago

#7362 closed defect (fixed)

TabContainer not so ok in IE

Reported by: rboy Owned by: dante
Priority: high Milestone: 1.2
Component: Dijit Version: 1.1.0
Keywords: Cc:
Blocked By: Blocking:

Description

Hi, I've encountered this problem in IE and TabContainer? The page: http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout/tab-container render failed Also failed is the test htmls provided in the dojo package There is only one successful case, it put <script type="text/javascript" src="./dojo/dijit/dijit.js"></script> <script type="text/javascript" src="./dojo/dijit/dijit-all.js.uncompressed.js" charset="utf-8"></script> in the html, so it render successful in IE

But in FF ,everything is ok. But in IE, I've to put these two lines in the html. Is it a defect? Thanks

Attachments (3)

tc.html (2.7 KB) - added by bill 11 years ago.
fixed version of test case
test_TabContainer.html (7.7 KB) - added by rboy 11 years ago.
test_TabContainer_noLayout.html (4.0 KB) - added by rboy 11 years ago.

Download all attachments as: .zip

Change History (15)

comment:1 Changed 11 years ago by dante

Resolution: invalid
Status: newclosed

If you are having to require in all the code dijit-all.js , it likely means you are missing a dojo.require("dijit.layout.TabContainer"); dojo.require("dijit.layout.ContentPane");

Please attach a test case and reopen if you cannot get it to work, this current bug report is too vague to act upon.

comment:2 Changed 11 years ago by rboy

Resolution: invalid
Status: closedreopened

Since I am using dojo 1.1 ibm version, the 4 files related with TabContainer? under the folder dojo/dijit/tests/layout/ ,for example "test_TabContainer_noLayout.html" .It is ok in FF but not ok in my IE7 These are the codes in the "test_TabContainer_noLayout.html"

<!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html> <head>

<title>SplitContainer? Widget Demo</title>

<style type="text/css">

@import "../../../dojo/resources/dojo.css"; @import "../css/dijitTests.css"; .dojoContentPane {

padding:1em;

}

</style>

<script type="text/javascript" src="../../../dojo/dojo.js"

djConfig="isDebug: true, parseOnLoad: true"></script>

<script type="text/javascript" src="../_testCommon.js"></script>

<script type="text/javascript">

dojo.require("dijit.layout.SplitContainer?"); dojo.require("dijit.layout.ContentPane?");

these exist inside our href splitcontainer dojo.require("dijit.form.Button"); dojo.require("dijit.form.ComboBox?"); var programaticExample = function(){

var rootNode = dojo.byId("holderNode"); add two children var pane1 = rootNode.appendChild(document.createElement('div')); var pane2 = rootNode.appendChild(document.createElement('div')); var pane3 = rootNode.appendChild(document.createElement('div'));

set the content. can use xhrGet, also pane1.innerHTML = "Pane one test"; pane2.innerHTML = "Pane two test";

should use css, but this works: dojo.style(rootNode,"height","150px"); dojo.style(rootNode,"border","1px solid #333");

make them contentpanes var cp1 = new dijit.layout.ContentPane?({ sizeShare:20 },pane1); var cp2 = new dijit.layout.ContentPane?({ sizeShare:30 },pane2); var cp3 = new dijit.layout.ContentPane?({

href: "doc0.html", sizeShare:30

},pane3).startup();

init the splitcontainer var split = new dijit.layout.SplitContainer?({

orientation:"horizontal", sizerWidth:7

},rootNode).startup();

}; dojo.addOnLoad(programaticExample);

</script>

</head> <body>

<h1 class="testTitle">Dijit Split Container Test</h1> <p>HTML before</p>

<div dojoType="dijit.layout.SplitContainer?"

orientation="vertical" sizerWidth="7" activeSizing="false" style="border: 1px solid #bfbfbf; float: left; margin-right: 30px; width: 400px; height: 300px;"

<div dojoType="dijit.layout.ContentPane?" sizeMin="10" sizeShare="50">

this box has three split panes

</div> <div dojoType="dijit.layout.ContentPane?" sizeMin="20" sizeShare="50"

style="background-color: yellow; border: 3px solid purple;"> in vertical mode

</div> <div dojoType="dijit.layout.ContentPane?" sizeMin="10" sizeShare="50">

without active resizing

</div>

</div>

<div dojoType="dijit.layout.SplitContainer?"

orientation="horizontal" sizerWidth="7" activeSizing="true" style="border: 1px solid #bfbfbf; float: left; width: 400px; height: 300px;"> <div dojoType="dijit.layout.ContentPane?" sizeMin="20" sizeShare="20">

this box has two horizontal panes

</div> <div dojoType="dijit.layout.ContentPane?" sizeMin="50" sizeShare="50">

with active resizing, a smaller sizer, different starting sizes and minimum sizes

</div>

</div>

<p style="clear: both;">HTML after</p>

the following splitter contains two iframes, see whether the resizer works ok in this situation <div dojoType="dijit.layout.SplitContainer?"

orientation="horizontal" sizerWidth="5" activeSizing="false" style="border: 2px solid black; float: left; width: 100%; height: 300px;"

<div dojoType="dijit.layout.ContentPane?" sizeMin="20" sizeShare="20">

<iframe style="width: 100%; height: 100%"></iframe>

</div> <div dojoType="dijit.layout.ContentPane?" sizeMin="50" sizeShare="50">

<iframe style="width: 100%; height: 100%"></iframe>

</div>

</div>

<h3>Programatic Example:</h3> <div id="holderNode"></div>

</body> </html>

comment:3 Changed 11 years ago by dylan

Milestone: tbd1.2
Owner: set to dante
Status: reopenednew

I'm not sure if this is valid, please test in IE 7.

comment:4 Changed 11 years ago by bill

Resolution: invalid
Status: newclosed

You need to include tundra, or at least dijit.css. Then it works. I'm attaching a fixed version of the testcase.

The documentation in the book is incorrect but that will be fixed when we migrate the book to the new doc system.

Changed 11 years ago by bill

Attachment: tc.html added

fixed version of test case

Changed 11 years ago by rboy

Attachment: test_TabContainer.html added

comment:5 Changed 11 years ago by rboy

Resolution: invalid
Status: closedreopened

Sorry I am wrong with the html content. So tc.html is not what I want. You can try the html I've just attached. Remove the following 2 lines and Run it in IE7, you can see the result. I think it is not a CSS problem.

<script type="text/javascript" src="../../dijit.js"></script>

<script type="text/javascript" src="../../dijit-all.js" charset="utf-8"></script>

comment:6 Changed 11 years ago by bill

Resolution: invalid
Status: reopenedclosed

You need to include tundra, or at least dijit.css. Then it works. I've attached a fixed version of the test case previously.

Provide me a test case that includes tundra.css and sets <body class="tundra"> and still fails, and then I'll look at it.

comment:7 Changed 11 years ago by rboy

Resolution: invalid
Status: closedreopened

Hi,

Please look into my attached "test_TabContainer_noLayout.html" carefully. It is totally different from the "tc.html" you have attached. I've done what you required. But it is still not ok in IE7 and I believe it is not the css problem, pls help me

Changed 11 years ago by rboy

comment:8 Changed 11 years ago by bill

What exactly is the problem? Is the issue on the "Sub TabContainer? from href" tab? What is supposed to show up, and what's showing up on your screen instead?

comment:9 Changed 11 years ago by dante

Resolution: worksforme
Status: reopenedclosed

I tested this (most recent attachment _noLayout) in IE6 + 7 and everything seemed fine to me, even without title="" attributes, the buttons render fine, and the layout flows as expected. tested with a current SVN HEAD. Perhaps the utf-8 thing is a locale+ie7 issue? Are you using a different locale? A release?

comment:10 Changed 11 years ago by rboy

Resolution: worksforme
Status: closedreopened

Actually my version is 1.1.0-20080416-IBM Is it because of this version? I am not using a different locale In firefox, the attached html render correct tabs In IE, there are no tabs if I remove the following lines

<script type="text/javascript" src="../../dijit.js"></script>

<script type="text/javascript" src="../../dijit-all.js" charset="utf-8"></script>

comment:11 Changed 11 years ago by bill

You still haven't listed what problem you are seeing, other than "TabContainer? not so ok". That's much too vague to act upon.

Anyway, your test case and version are basically the same as http://download.dojotoolkit.org/release-1.1.0/dojo-release-1.1.0/dijit/tests/layout/test_TabContainer_noLayout.html. I do so a lot of layout problems in that test.

http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/layout/test_TabContainer_noLayout.html (basically the 1.2 beta release) is better although the "Sub tabcontainer from href" tab doesn't show up on any browser... but that's just a problem with the test case. I'll check in a fix now.

comment:12 Changed 11 years ago by bill

Resolution: fixed
Status: reopenedclosed

(In [15198]) Test case fixes for test_TabContainer_noLayout.html. Fixes #7362.

Note: See TracTickets for help on using tickets.