Opened 13 years ago

Closed 12 years ago

Last modified 9 years ago

#1969 closed defect (fixed)

Accordion overflow in mozilla firefox

Reported by: guest Owned by: Adam Peller
Priority: high Milestone: 0.9
Component: Dijit - LnF Version: 0.4
Keywords: accordion overfow scroll firefox Cc:
Blocked By: Blocking:

Description (last modified by Adam Peller)

The accordion autoscroll seems not to work in this version, with Mozilla Firefox. If the amount of data is larger than the contentPane capacity, this contentPane doesn't provide scrollbars. If you try to set overflow:auto on the pane, the content is not hide when selecting another pane ...

This problem could be solved in displaying/hiding the pane by catching some events fired by the pane. Just have a look this code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Accordion Widget Demo</title>

<script type="text/javascript">
	var djConfig = {isDebug: false };
</script>
<script type="text/javascript" src="./dojo.js"></script>
<script language="JavaScript" type="text/javascript">
	dojo.require("dojo.widget.Tree");
	dojo.require("dojo.widget.TreeNode");
	dojo.require("dojo.widget.AccordionContainer");
	dojo.require("dojo.widget.SplitContainer");
	dojo.require("dojo.widget.ContentPane");


'''
function hidePane(){
    var pane = document.getElementById("pane2");
    pane.style.display="none";
}

function showPane(){
    var pane = document.getElementById("pane2");
    pane.style.display="block";
}'''



</script>

<style>
html, body {
	height: 100%;
	width: 100%;
	overflow: hidden;
}
#main {
	height: 300px;
	width: 300px;
	left: 1%;
	top: 1%;
	position: relative;
}
.label {
	border: 1px solid black;
	background: #232323;
	color: #fff;
	font-weight: bold;
}

.label :hover {
	cursor: pointer;
}

.accBody {
	background: #ededed;
	overflow: auto;
}
</style>
</head>
<body>
<div dojoType="AccordionContainer" labelNodeClass="label" containerNodeClass="accBody"
	style="border: 2px solid black;" id="main">

        <div dojoType="ContentPane" open="true" label="Pane 1" >

                <p>
                        Nunc consequat nisi vitae quam. Suspendisse sed nunc. 
                </p>
        </div>
	<div dojoType="ContentPane" label="Pane 2" '''id="pane2" style="overflow:auto;" onhide="hidePane();" onshow="showPane();"'''>
		<h2> Pane 2 </h2>
		<p>
                        Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
                        Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
                        vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
                        augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
                        metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
                        ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
                        euismod, magna nulla viverra libero, sit amet lacinia odio diam id
                        risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
                        porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
                        faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
                        consequat quis, varius interdum, nulla. Donec neque tortor,
                        sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
                        ut eros sit amet ante pharetra interdum.
                </p>	
	</div>
</div>
<div>

hello
hello

</div>

</body>
</html>

Change History (8)

comment:1 Changed 13 years ago by bill

Resolution: worksforme
Status: newclosed

Seems to work fine for me. Just try http://archive.dojotoolkit.org/nightly/tests/widget/test_AccordionContainer.html

If you a testcase that doesn't work that please attach it to this bug. (Don't inline the HTML)

comment:2 Changed 12 years ago by grad0611@…

Resolution: worksforme
Status: closedreopened

After 4th January 2007 it surely does not work. Please test the first accordion at:

http://archive.dojotoolkit.org/nightly/tests/widget/test_AccordionContainer.html

in this manner: open the 3rd tab then open the 1st. You will see the contents of the 3rd tab spilling onto the text below (provided that the accordion is located at the center of the screen, not the bottom).

After various tests I have confirmed that this happens at Firefox (1.5.0.9 and 2.0.1 tested) only when overflow:auto or overflow:scroll is selected.

comment:3 Changed 12 years ago by Adam Peller

Description: modified (diff)

comment:4 Changed 12 years ago by dylan

Milestone: 0.9
Owner: changed from dylan to Dustin Machi
Status: reopenednew

comment:5 Changed 12 years ago by koranteng

Owner: changed from Dustin Machi to koranteng

comment:6 Changed 12 years ago by guest

I can confirm this problem in DOJO 0.4.2

comment:7 Changed 12 years ago by Adam Peller

Owner: changed from koranteng to Adam Peller
Status: newassigned

comment:8 Changed 12 years ago by dante

Resolution: fixed
Status: assignedclosed
Note: See TracTickets for help on using tickets.