CSS解决方案：下拉菜单破坏div边框

Question

CSS解决方案：下拉菜单破坏div边框

10

我有一个下拉菜单，其中选项的值非常长。当我选择一个长选项时，它超出了包含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

- LCJ

这并不是一个错误，这只是IE 11样式下拉框的方式。让所有下拉框具有跨浏览器兼容性的一种方法是设计自己的选项；或者更好的是使用插件。例如，Chosen。类似的答案请参考http://stackoverflow.com/questions/18053645/dropdownlist-styling-in-internet-explorer/18689790#18689790。 - Muhammad Hamza Nisar

1

@Lijo 你找到任何解决方案了吗？ - Tirthraj Barot

@TirthrajBarot请停止打扰别人寻找Fiddles。使用内联代码工具。 - user229044

@MuhammadHamzaNisar 请停止打扰他人寻找Fiddles。请使用内联代码工具。 - user229044

你希望选择选项太长以至于无法在框内显示时，它应该如何表现？是将其分成两行显示还是仅显示一行？ - SML

这个链接有一个非常相似的问题：https://dev59.com/uGw05IYBdhLWcg3wXAmF - kunambi

3个回答

1

选项字符串的长度是导致您的div边框破裂的原因。

本机选择中无法包装文本。您可以使用jquery插件来实现此操作。这里有更多细节仍然可以尝试这个并查看它是否起作用：

break-word表示通常无法分解的单词可以在行中没有其他可接受的断点时在任意点上被打破。 pre保留空白序列，只有在源代码中出现换行符和元素时才会换行。 pre-wrap保留空白序列。在换行字符，元素和必要时填充行框。

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

- Tirthraj Barot

1

请将您的代码放在答案中，而不是链接到外部网站。如果JSFiddle崩溃了，您的答案就没有那么有用了。 - TylerH

0

默认的选择框是基于浏览器工作的，我们可以移除箭头并且可以应用 CSS 使其看起来像自定义的，但是没有打破单词的选项。为了实现这一点，我们需要使用插件，例如 select2、custom-select、chosen 等。

- user5139166

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SML · Accepted Answer

1) 首先，您的两个选择框的宽度大于包含它的列的宽度（需要考虑所使用的所有填充和边距）。
一旦将每个选择框的宽度设置为约 230px，它们就应该适合。

2) 您说“当您选择一个长值时，它超出了包含div的边界”。
鉴于您的选择选项包含的字符比选择框的宽度可以容纳的要多，因此必须扩展到足够宽的宽度，以便在下拉时看到选项。这不是错误，这是意图如此。
如果您希望下拉菜单与选择框具有相同的宽度，并且特别长的选项显示为多行。据我所知，没有好的跨浏览器兼容的纯CSS解决方案。
但是，您可以通过 javascript/jquery + CSS 的组合实现此目标。

3) 上下“问题”与浏览器呈现元素/CSS的不同方式有关。
如第二点所述，可以通过使用 javascript/jquery 解决此“问题”。

4) 请注意，IE7及以下版本不支持此类问题的许多 javascript/jquery 解决方案，但在现在这个时代，不必为 IE6 和 7 提供完全支持是可以接受的。
如果需要，您始终可以为旧浏览器提供单独的 CSS 样式表。

5) 您可以轻松将当前布局转换为 Div+CSS，并放弃使用表格，因为表格应该仅用于数据显示。
如果您使用 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>