Print Page - menubutton causes unwanted scrollbars to appear

I can't work out how to stop the easyui-menubutton make unwanted scrollbars appear. I have written the following to demonstrate the problem. Just resize your browser height so that the vertical scrollbar just DOESN'T appear (just below the indicated line), then roll over the menubutton at the top. On all major browsers you will see unwanted scrollbars appear.

Please advise.

Thanks in advance.

Code:

<html>
<head>
	<link rel="stylesheet" type="text/css" href="./jquery-easyui-1.3.4/themes/default/easyui.css" />
	<link rel="stylesheet" type="text/css" href="./jquery-easyui-1.3.4/themes/icon.css" />
	<script src="./jquery-easyui-1.3.4/jquery.min.js"></script>
	<script src="./jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
</head>

<body>

<div style="padding:5px;border:1px solid #ddd;width:250px">
<a href="javascript:void(0)" id="mb" class="easyui-menubutton" data-options="menu:'#options-menu'">Options</a>
</div>
<div id="options-menu" style="width:150px;" data-options="onClick:function(item){ optionsMenuClick(item.name); }">
	<div data-options="name:'started'">Getting started</div>
	<div data-options="name:'tutorials'">Tutorials</div>
	<div data-options="name:'faq'">FAQ</div>
	<div class="menu-sep"></div>
	<div data-options="name:'settings'">Settings</div>
	<div data-options="name:'install'">Install Data</div>
	<div data-options="name:'about'">About</div>
</div>


<div>
<p>placeholder</p>	
<p>placeholder</p>	
<p>placeholder</p>	
<p>placeholder</p>	
<p>placeholder</p>	
<p>.</p>	
<p>.</p>	
<p>.</p>	
<p>.</p>	
<p>.</p>	
<p>Resize your browser window so that it's just below this line (so that no browser scrollbars appear):</p>
<p>------------------------------------------------------------------</p>
</div>

</body>
</html>

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Quarkrunner on November 10, 2013, 10:19:11 PM