用于下拉破坏div边界的CSS解决方案

Question

我有一个带有很长值的下拉列表作为选项.当我选择一个长值时,它超出了包含div的边界.此外,所选项目上方的项目将排到最前面而不是"下拉".这是第一个选择"ALL"向上而不是向下.

我搜索并找到了一些Javascript方法来解决这个问题.解决这个问题的css方法是什么？

注意:在IE11和Chrome中观察到问题.在IE6中,它工作得很好.

问题

<div style="width:500px; background-color:gray">

  <table class="table-tab-body" cellspacing="0" cellpadding="0" width="100%" style="border-bottom: 2px solid #5F005F;">
    <tbody>
      <tr>
        <td colspan="2">
          <b style="margin: 0 0 0 10px;">
            Select Provider
          </b>
        </td>
        <td colspan="2">
          <b>
            Select Locations
          </b>
        </td>
      </tr>
      <tr>
        <td colspan="2" style="overflow:hidden; border: 3px solid purple; ">
          <div style="margin: 0 0 0 10px; padding: 0 0 0 0px; overflow:hidden; width:245px; ">
            <select name="drpVendor" id="drpVendor" fieldname="Vendor" style="width: 250px; padding: 0 0 0 0px; overflow:hidden;">
              <option selected="selected" value="">ALL</option>
              <option value="11824">A SCD GARMENT CO LTD DIV (678904), Kerala, India</option>
            </select>
          </div>
        </td>
        <td colspan="2" style="overflow:hidden; border: 1px solid blue; ">
          <select name="drpVendorFacility" id="drpVendorFacility" fieldname="Facility" style="width: 250px;">
            <option value="1">ALL</option>
          </select>
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <hr>
        </td>
      </tr>



    </tbody>
  </table>

  <input name="hidUserID" type="hidden" id="hidUserID" value="1">

</div>

IE6

Answer 1

1)首先,两个选择框的宽度大于包含它的列的宽度(您需要考虑所有填充和使用的边距).
将每个选择框的宽度设置为周围后230px,它们应该适合.

2)你说"当你选择一个长值时,它超出了包含div的边界".
鉴于您的选择选项包含的字符数多于选择框的宽度所能容纳的数量,因此必须将其扩展到足够宽的宽度,以便在选项下降时看到选项.这不是一个错误,这就是它的意图.
如果您想要的是下拉列表与选择框的宽度相同,则可以通过多行显示特别冗长的选项.据我所知,目前还没有兼容良好的跨浏览器兼容的CSS解决方案.但是,您可以通过使用javascript/jquery + CSS的组合来实现此目的.

3)向上/向下"问题"与浏览器呈现元素/ CSS的不同方式有关.
如第2点所述,使用javascript/jquery解决方案可以改善这个"问题".

4)请注意IE7及以下版本不支持很多针对此类问题的javascript/jquery解决方案,但是在这个时间和年龄不能完全支持IE6和7.
如果需要,您可以随时为旧版浏览器提供单独的CSS样式表.

5)您可以轻松地将当前布局转换为Div + CSS,从而放弃使用table,这应该只用于显示数据.
如果您在Div + CSS中进行布局而不是在表格中进行布局,则可以更轻松地使页面响应不同的屏幕尺寸.

6)我已根据您的原始代码整理了一个jquery插件解决方案的演示,供您参考.我在演示中保留了表格布局,但如第5点所述,您应该考虑将布局转换为Div(如果可能).

希望这可以帮助.

$(function() {
  $("#drpVendor").selectBoxIt({
    theme: "default",
    defaultText: "ALL",
    autoWidth: false
  });
  $("#drpVendorFacility").selectBoxIt({
    theme: "default",
    defaultText: "ALL",
    autoWidth: false
  });
});

@import url("http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.3.0/jquery.selectBoxIt.css");
 .selectboxit-container .selectboxit,
.selectboxit-container .selectboxit-options {
  width: 225px;
  /* Width of the dropdown button */
  border-radius: 3px;
  margin-top: 3px;
}
.selectboxit-container span,
.selectboxit-container .selectboxit-options a {
  line-height: 20px;
  height: 22px;
}
.selectboxit-options .selectboxit-option .selectboxit-option-anchor {
  white-space: normal;
  min-height: 22px;
  height: auto;
}
.first {
  padding: 0 0 0 10px;
}
.top {
  padding-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.3.0/jquery.selectBoxIt.min.js"></script>

<div style="width:500px; background-color:gray">

  <table class="table-tab-body" cellspacing="0" cellpadding="0" width="100%" style="border-bottom: 2px solid #5F005F;">
    <tbody>
      <tr>
        <td colspan="2" class="first top">
          <b>Select Provider</b>
        </td>
        <td colspan="2" class="top">
          <b>
            Select Locations
          </b>
        </td>
      </tr>
      <tr>
        <td colspan="2" class="first">
          <select name="drpVendor" id="drpVendor" fieldname="Vendor">
            <option selected="selected" value="">ALL</option>
            <option value="11824">A SCD GARMENT CO LTD DIV (678904), Kerala, India</option>
            <option value="11825">A SCD GARMENT CO LTD DIV Sample, Sample, Sample</option>
          </select>
        </td>
        <td colspan="2">
          <select name="drpVendorFacility" id="drpVendorFacility" fieldname="Facility">
            <option value="1">ALL</option>
            <option value="2">Option 1</option>
            <option value="3">Option 2</option>
          </select>
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <hr>
        </td>
      </tr>
    </tbody>
  </table>

  <input name="hidUserID" type="hidden" id="hidUserID" value="1">
</div>

Answer 2

选项字符串的长度是破坏 div 边框的原因。

文本无法封装在本机选择中。您可以使用 jquery 插件来实现此目的。这里有更多细节

您仍然可以尝试一下，看看它是否有效：

break-word 表示如果行中没有其他可接受的断点，则通常不可断的字可以在任意点处断。

pre 保留空白序列，仅在源和元素中的换行符处断行。

预换行 保留空白序列。行在换行符、 和 处断行，以填充行框。

  word-wrap: break-word;      /* IE*/
  white-space: -moz-pre-wrap; /* Firefox */
  white-space: pre-wrap;      /* other browsers */
  width:150px;
  display:inline-block