#7464 closed bug (fixed)

Opened June 11, 2011 01:53AM UTC

Closed June 13, 2011 02:00PM UTC

Accordion causes scrollbar to disappear

Reported by: qicboy Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.accordion Version: 1.8.13
Keywords: Cc:
Blocked by: Blocking:
Description

I constrained the size of an accordion so that it forces scrollbars to appear. When the accordion is first displayed, the scrollbars are visible but when I select one of the other panels and then return to the original panel the scrollbars disappear.

This is a problem on IE6 on Windows XP SP3.

To build the steI started with the demo index.html to build the test case. I changed the height and width of the dialog and stuffed the accordion inside the dialog.

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>jQuery UI Example Page</title>
		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
		<script type="text/javascript">
			$(function(){

				// Accordion
				$("#accordion").accordion({ header: "h3" });
				
				// Dialog			
				$('#dialog').dialog({
					autoOpen: false,
					width: 400,
					height: 400,
					buttons: {
						"Ok": function() { 
							$(this).dialog("close"); 
						}, 
						"Cancel": function() { 
							$(this).dialog("close"); 
						} 
					}
				});
				
				// Dialog Link
				$('#dialog_link').click(function(){
					$('#dialog').dialog('open');
					return false;
				});

			});
		</script>
	</head>
	<body>

		<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
		<!-- ui-dialog -->
		<div id="dialog" title="Dialog Title">
		
		<!-- Accordion -->
		<h2 class="demoHeaders">Accordion</h2>
		<div id="accordion">
			<div>
				<h3><a href="#">First</a></h3>
				<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
			</div>
			<div>
				<h3><a href="#">Second</a></h3>
				<div>Phasellus mattis tincidunt nibh.</div>
			</div>
			<div>
				<h3><a href="#">Third</a></h3>
				<div>Nam dui erat, auctor a, dignissim quis.</div>
			</div>
			
		</div>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		</div>

	</body>
</html>
Attachments (0)
Change History (1)

Changed June 13, 2011 02:00PM UTC by scottgonzalez comment:1

resolution: → fixed
status: new → closed

This works in master.