Internet Explorer选择表格宽度问题

时间:2019-07-09 07:37:41

标签: javascript html css internet-explorer bootstrap-4

我正在使用简单的HTML代码来显示选择下拉框。它可以在谷歌浏览器,Firefox等中正常运行,但是却无法正常运行,因为我希望它可以在Internet Explorer中使用。选择下拉列表太长,以至于它不在IE的框中。

我已经尝试指定宽度:100%;和最大宽度:选择类的100%,但没有帮助。

enter image description here

.form-parent {
    .form-container {
        input {
            border-color: $ThemeColorLightGray;
            background-color: $ThemeColorLightGray;
        }
    }
}

.form-container {
    display: inline-block;
    width: 100%;
    padding: 0 0 40px;

    .form-control,
    .base-datepicker[readonly] {
        border-color: $ThemeColorLightGray;
        background-color: $ThemeColorLightGray;
    }
    .form-tooltip {
        display: inline-block;
        position: absolute;
        }
}

.form-control {
  display: block;
  width: 100%;
  height: calc(2.25rem + 2px);
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0;
}

select {
  -webkit-writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: black;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  text-align: start;
  white-space: pre;
  -webkit-rtl-ordering: logical;
  cursor: default;
  font: 400 13.3333px Arial;
}
<form method="POST" action="" class="custom-form form-parent js-flex-box">
  <div class="form-container">
    <fieldset>
      <div class="form-group">
        <div class="groupOrder" style="width: 100%; overflow: hidden; background-color: red;">
          <select name="Hotel" placeholder="Vælg hotel" title="Vælg hotel" aria-label="Vælg hotel" class="pham form-control pristine touched" aria-required="true" aria-invalid="false" style="overflow: hidden !important; float: right;">
            <option value="" selected="selected">Vælg hotel</option>
            <option value="Wakeup Copenhagen">Wakeup Copenhagen, Bernstorffsgade</option>
            <option value="Wakeup Copenhagen, Borgergade">Wakeup Copenhagen, Borgergade</option>
            <option value="Wakeup Copenhagen, Carsten Niebuhrs Gade">Wakeup Copenhagen, Carsten Niebuhrs Gade</option>
            <option value="Wakeup Aarhus, Bruunsgade">Wakeup Aarhus, Bruunsgade</option>
          </select>
        </div>
        <div class="form-tooltip">
          <div style="display: none;">Dette felt skal udfyldes</div>
        </div>
      </div>
    </fieldset>
  </div>
</form>

1 个答案:

答案 0 :(得分:1)

我认为您可以像我一样将其包装在另一个主容器下,并且有效

主要变化

包装在主容器中

    <div class='mainCon' style='background-color: red;width: 80%;'> 
     ........
     ........
     ........
    </div>

然后在CSS中

#mainCon
{
  display: block;
  background-color: red;
}

.pham {
    width: 100%;
}

#mainCon
{
  display: block;
  background-color: red;
}
.form-control {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0;
    }
   
   select {
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: black;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    text-align: start;
    white-space: pre;
    -webkit-rtl-ordering: logical;
    cursor: default;
    font: 400 13.3333px Arial;
}
<div class='mainCon' style='background-color: red;width: 80%;'>

<div class="form-group">


  <div>
  <input type='text'>
  </div>

<div>
  <input type='text'>
  </div>
  <div>
  <input type='text'>
  </div>
<select name="Hotel" placeholder="Vælg hotel" title="Vælg hotel" aria-label="Vælg hotel" class="pham form-control pristine touched" aria-required="true" aria-invalid="false" style="width: 100%;">
    <option value="" selected="selected">Vælg hotel</option>
    <option value="Sample1">Sample 1</option>
    <option value="Sample2">Sample 2</option>
    <option value="Sample3">Sample 3</option>
    <option value="Sample4">Sample 4</option>
  </select>
  <div class="form-tooltip">
    <div style="display: none;">Dette felt skal udfyldes</div>
  </div>
</div>

 <div>
  <input type='text'>
  </div>

<div>
  <input type='text'>
  </div>
  <div>
  <input type='text'>
  </div>

</div>