CSS 下拉菜单在响应式视图中展开

Question

我有一个包含多个输入字段的表单。出现此问题的是一个特定的下拉菜单。 All other drop downs are fine but when this category drop down's options are selected it causes whole layout to expand on responsive view (screens smaller than 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;
}

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

这是 link： Test Website Link

Answer 1

添加这个 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 中。看见！

Answer 2

您有 jQuery 代码，当您 select 类别下拉列表中的值时，它会更改您的 DOM。

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

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

您需要为每个输入标签提供 100% 的宽度以使其响应。然后就可以了

/* Add this CSS */

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

CSS 下拉菜单在响应式视图中展开

CSS Dropdown expands on responsive view

html

css

responsive