1
내 gridview 안에 드롭 다운을 구현했습니다. 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>