javascript - 水平滚动溢出

Question

我在我的 gridview 中实现了一个 Chosen 下拉菜单。 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>

Answer 1

像这样:

https://jsfiddle.net/tqpxqose/2/

我改变的是，我把div中的overflow-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);">