Решение CSS для раскрывающегося разрыва div-рамки

Ответ 1

1) Прежде всего, ширина ваших двух полей выбора больше ширины столбца, который содержит его (вам нужно учитывать все заполнение и маржу).
После того, как вы установите ширину каждого из полей выбора примерно на 230px, они должны соответствовать.

2) Вы сказали: "Когда вы выбираете длинное значение, оно выходит за границы содержащего div".
Учитывая, что ваши параметры выбора содержат больше символов, чем та, которая может удерживать ширину вашего окна выбора, она должна расширяться до ширины, достаточно широкой, чтобы ее можно было увидеть, когда она падает. Это не ошибка, так оно и есть. Если вы хотите, чтобы выпадающие страницы имели такую ​​же ширину, что и поле выбора, имея особенно длинные параметры, отображаемые в многострочных линиях. Насколько мне известно, для этого не существует подходящего для CSS-совместимого решения. Вы можете, однако, добиться этого, используя комбинацию javascript/jquery + CSS.

3) Проблема "вверх" / "вниз" связана с различными способами, в которых браузеры отображают элементы /CSS.
Эта "проблема" может быть улучшена с использованием решения javascript/jquery, как предложено в пункте 2.

4) Обратите внимание, что IE7 и ниже не поддерживают много решений javascript/jquery для этого типа проблем, но вполне нормально предоставлять полную поддержку IE6 и 7 в это время и в возрасте. < ш > При необходимости вы всегда можете иметь отдельную таблицу стилей CSS для старых браузеров.

5). Вы можете легко преобразовать ваш текущий макет в Div + CSS и тем самым отказаться от использования таблицы, которая действительно должна использоваться только для отображения данных.
Легче сделать вашу страницу чувствительной к разным размерам экрана, если вы делаете свой макет в Div + CSS, чем в форме таблицы.

6) Я собрал демо-версию jQuery-плагина на основе вашего исходного кода для вашей справки. Я сохранил таблицу в demo, но, как упоминалось в пункте 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>

Ответ 2

Длина строки опций является причиной нарушения границы 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

Ответ 3

поле выбора по умолчанию, основанное на браузере, мы можем удалить стрелку, и мы можем сделать/применить css, чтобы выглядеть как настраиваемый, но не вариант сломать слово. для этого нам нужно использовать плагины типа - select2, custom-select, selected и т.д.