Opened 15 years ago

Last modified 12 years ago

#1969 closed defect

Accordion overflow in mozilla firefox — at Initial Version

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


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 :



<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");"none";


function showPane(){

var pane = document.getElementById("pane2");"block";



<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" >


Nunc consequat nisi vitae quam. Suspendisse sed nunc.


</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.



</div> <div>

hello hello


</body> </html>

Change History (0)

Note: See TracTickets for help on using tickets.