CSS Dropdown扩展了响应式视图

Question

我有一个包含多个输入字段的表单。发生此问题有一个特定的下拉列表。所有其他下拉菜单都很好但是当选择此类别下拉选项时，会导致整个布局在响应视图（小于767px的屏幕）上展开。

以下是截图：

选择后：

HTML：

<div class="ui-select">
  <span class="selectDefault">Special Listing</span>
  <select aria-invalid="false" id="listingTypeSelect" name="listing_type"
          data-rule-notequals="-1" data-msg-notequals="Please select a property type ">
    <option class="defualt-text" value="-1">Please select</option>
    <option value="1">Standard Listing</option>
    <option value="2">Special Listing</option>
    <option value="3">Premium Listing</option>
  </select>
</div>

CSS：

.mod-listing-form-wrapper .listing-form fieldset .form-field .ui-select {
  border: 2px solid #d5d5d5;
  border-radius: 3px;
  box-sizing: border-box;
  padding: 5px 20px 6px 20px;
  overflow: hidden;
  background-image: url('../img/dd.png');
  background-repeat: no-repeat;
  background-position: 98% 15px;
  width: 100%;
  position: relative;
}

现在我一直在努力找到解决这个问题的方法。但是我不太确定这是导致问题的下降还是低于它的textarea。任何帮助将非常感激。

这是链接： Test Website Link

Answer 1

当你在类别下拉列表中选择一个值时，你有jQuery代码可以改变你的DOM。

特别是此行被称为$('#file1').show();，当您选择类别时会导致问题。

现在$('#file1')块具有无响应的文件输入标记，这会破坏您的UI。对于每个类别值，输入标记都有gallery, gallery2 and gallery3个。

对于每个输入标签，您需要提供100％的宽度以使其响应。然后它会工作。

/* Add this CSS */

#gallery, #gallery2, #gallery3 {
    width: 100%
}

Answer 2

添加此css！

@media screen and (max-width: 420px) {
  .mod-listing-form-wrapper .listing-form fieldset .form-field .col2-2 {
    width: 76.785%;
  }
}

并确保textarea必须放在.form-field > .col2-2中。看见！