CSS Dropdown расширяется в ответном виде

Question

У меня есть форма с несколькими полями ввода. Существует одна конкретная проблема, с которой эта проблема возникает. Все остальные выпадающие файлы прекрасны, но когда выбраны параметры раскрывающегося списка, это приводит к тому, что весь макет расширяется на отзывчивом представлении (экраны размером меньше 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') есть теги ввода файлов, которые не реагируют, что нарушает ваш пользовательский интерфейс. Входные теги имеют значения 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. Видеть это!