水平滚动溢出
Overflow with horizontal scrolling
我在gridview内实现了 selected 下拉列表。gridview位于一个由div组成的方框内。
我希望它能够打开而不受网格本身的限制。我可以通过将overflow-x:visible !important;
添加到网格样式中来做到这一点。
我希望网格有水平滚动能力太。我将overflow:auto;
添加到网格中。
但是我不能两者兼顾。如果我做第一个并使下拉框可见,网格就会在框上,滚动就不能再工作了。如果我做另一个,下拉框就会落在网格后面。
有办法两者兼得吗?请随意使用下面这个样品给我看看。原谅并忽略代码的污秽。
https://jsfiddle.net/tqpxqose/<table cellspacing="0" id="ContentPlaceHolder1_grdInfo" style="width:100%;border-collapse:collapse;">
<tbody>
<tr style="height:50px;">
<td>
<select name="ctl00$ContentPlaceHolder1$grdInfo$ctl02$ddlItemHistory" id="ddlItemHistory" class="chzn-select chzn-done" style="display: none; background-color: rgb(128, 0, 128);">
<option value="27/10/2016 - Lorem ipsum dolor sit amet ">27/10/2016 -Lorem ipsum dolor sit amet </option>
<option value="14/09/2016 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet ">14/09/2016 - Lorem ipsum dolor sit amet </option>
<option value="29/06/2016 - ILorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet ">29/06/2016 - Integration in UAT</option>
<option value="24/06/2016 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet ">24/06/2016 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </option>
<option value="23/06/2016 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet ">23/06/2016 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </option>
<option value="13/02/2015 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet ">13/02/2015 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </option>
<option value="11/02/2015 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet ">11/02/2015 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </option>
</select>
<div id="ddlItemHistory_chzn" class="chzn-container chzn-container-single chzn-container-active" style="width: 876px;" title=""><a href="javascript:void(0)" class="chzn-single chzn-single-with-drop" tabindex="-1"><span>27/10/2016 - Lorem ipsum dolor sit amet</span><div><b></b></div></a>
<div class="chzn-drop" style="left: 0px; width: 874px; top: 24px;">
<div class="chzn-search">
<input type="text" autocomplete="off" style="width: 839px;">
</div>
<ul class="chzn-results">
<li id="ddlItemHistory_chzn_o_0" class="active-result result-selected" style="">27/10/2016 - Lorem ipsum dolor sit amet</li>
<li id="ddlItemHistory_chzn_o_1" class="active-result" style="">14/09/2016 - Lorem ipsum dolor sit amet </li>
<li id="ddlItemHistory_chzn_o_2" class="active-result" style="">29/06/2016 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </li>
<li id="ddlItemHistory_chzn_o_3" class="active-result" style="">24/06/2016 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet (</li>
<li id="ddlItemHistory_chzn_o_4" class="active-result" style="">23/06/2016 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </li>
<li id="ddlItemHistory_chzn_o_5" class="active-result" style="">13/02/2015 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
</li>
<li id="ddlItemHistory_chzn_o_6" class="active-result" style="">11/02/2015 - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet </li>
</ul>
</div>
</div>
<script type="text/javascript">
$(".chzn-select").chosen();
$(".chzn-select-deselect").chosen({
allow_single_deselect: true
});
</script>
<script type="text/javascript">
$('#ddlItemHistory').css("background-color", "purple");
$("select").change(function() {
$('#ddlItemHistory').css('color', "yellow");
});
</script>
</td>
<td>
<span id="ContentPlaceHolder1_grdInfo_lblDocumentsOutstanding_0">TestTestTest</span>
</td>
<td>
<span id="ContentPlaceHolder1_grdInfo_lblDateCreated_0">20/06/2016 17:49:10</span>
</td>
<td>
<span id="ContentPlaceHolder1_grdInfo_lblUserCreated_0">HakanErdogan</span>
</td>
</tr>
</tbody>
</table>
像这样:
https://jsfiddle.net/tqpxqose/2/我所改变的是,我从div中删除了溢出x,并直接应用于select position:absolute
<select style="position:absolute" name="ctl00$ContentPlaceHolder1$grdInfo$ctl02$ddlItemHistory" id="ddlItemHistory" class="chzn-select chzn-done" style="display: none; background-color: rgb(128, 0, 128);">
相关文章:
- »内部的getBoundingClientRect();溢出:滚动«
- 溢出:滚动;jquery在停止工作后一直滚动到某个时刻
- 将DIV元素绑定到溢出滚动条
- JQuery / JS:检测用户的滚动尝试,没有任何窗口溢出滚动到
- 弹出窗口中的溢出滚动条不起作用(引导)
- 溢出:滚动不起作用
- 检测移动浏览器是否支持溢出:滚动
- css溢出:滚动.从底部开始
- 当内容从溢出滚动转移到溢出隐藏时,元素的宽度为100%
- 防止溢出滚动:单击指向锚点的链接时隐藏元素
- 如何删除覆盖图像查看器的溢出(滚动条)
- 检查元素是否在溢出滚动DIV中完全可见
- JS代码更改表标题,以显示溢出滚动条出现时
- 禁用弹性滚动只对HTML,但维护元素溢出:滚动
- Android 3.1 WebView溢出滚动-不渲染长列表的滚动
- 如何使用JQuery修复窗口高度,以调整面板溢出y滚动
- jQuery UI问题,可掉落和溢出滚动
- onsen2.0列表溢出滚动不起作用
- 是否有一种方法可以让跨平台溢出:滚动
- Chrome问题与CSS过渡和溢出y:滚动或自动