html - CSS Dropdown 在响应式 View 上扩展

Question

我有一个包含多个输入字段的表单。出现此问题的是一个特定的下拉菜单。所有其他下拉菜单都很好，但是当选择此类别下拉菜单的选项时，它会导致整个布局在响应式 View (小于 767 像素的屏幕)上展开。

截图如下:

选择后:

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;
}

现在我一直在努力寻找解决这个问题的办法。但我不太确定是这个下拉菜单导致了问题还是它下面的文本区域。任何帮助将非常感激。

这是链接: Test Website Link

Answer 1

当您在类别下拉列表中选择一个值时，您有 jQuery 代码会更改您的 DOM。

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

现在 $('#file1') block 具有无响应的文件输入标签，这会破坏您的 UI。输入标签的每个类别值都有 id gallery、gallery2 和 gallery3。

您需要为每个输入标签提供 100% 宽度以使其响应。然后它将起作用。

/* Add this CSS */

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