如何在引导下拉菜单中实现选择标签溢出行为

我在我的HTML中使用一个启动下拉菜单。如何实现与选择HTML标签相同的溢出行为?我添加了一个代码片段。

我不能使用选择，因为项目的复杂样式(图像和按钮)。

我在一个winform应用程序内的Web浏览器控件中托管html。在html下面有一个c#控件，如果我使用select标签，它会隐藏项目。我添加了这个信息只是为了解释我的问题(同样的行为可以用Iframe标签来解释)。

注意:确保最小化窗口以实现溢出，如果您复制此HTML。

点击这里查看理想的选择行为。

点击这里查看两个控件的对比

Thanks in advance

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
	<body>
		<div class="dropdown">
		<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">click me
		<span class="caret"></span></button>
		<ul class="dropdown-menu">
		  <li>AAA</li>
		  <li>BBB</li>
		  <li>CCC</li>
		  <li>DDD</li>
		  <li>EEE</li>
		  <li>AAA</li>
		  <li>BBB</li>
		  <li>CCC</li>
		  <li>DDD</li>
		  <li>EEE</li>
	  <li>AAA</li>
	  <li>BBB</li>
	  <li>CCC</li>
	  <li>DDD</li>
	  <li>EEE</li>
	  <li>AAA</li>
	  <li>BBB</li>
	  <li>CCC</li>
	  <li>DDD</li>
	  <li>EEE</li>
		</ul>
		</div>
		<select style="position: fixed; left: 200px; top:0px;">
			<option>click me too</option>
			<option>BBB</option>
			<option>CCC</option>
			<option>DDD</option>
			<option>EEE</option>
			<option>AAA</option>
			<option>BBB</option>
			<option>CCC</option>
			<option>DDD</option>
			<option>EEE</option>
			<option>AAA</option>
			<option>BBB</option>
			<option>CCC</option>
			<option>DDD</option>
			<option>EEE</option>
			<option>AAA</option>
			<option>BBB</option>
			<option>CCC</option>
			<option>DDD</option>
			<option>EEE</option>
		</select>
		<div style="color:red; font-weight:bold;">If you copy this html, minimize the window size before testing behavior<div>
	</body>
</html>

代替这个，

<select class="form-control" style="position: fixed; left: 200px; top:0px;">

相关内容

最新更新

热门标签：