CSS-Dropdown erweitert auf reagierende Ansicht

Question

Ich habe ein Formular mit mehreren Eingabefeldern. Es gibt eine bestimmte Dropdown-Liste, mit der dieses Problem auftritt. Alle anderen Dropdown-Menüs sind in Ordnung, aber wenn die Dropdown-Liste "Kategorie" ausgewählt ist, wird das gesamte Layout in der Responsive-Ansicht (Bildschirme kleiner als 767 Pixel) erweitert.

Hier sind Screenshots:

Nach Auswahl:

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

Jetzt habe ich versucht, eine Lösung für dieses Problem zu finden. Aber ich bin mir nicht ganz sicher, ob es das Drop-down ist, das das Problem verursacht oder das Textfeld darunter. Jede Hilfe würde wirklich geschätzt werden. Hier

ist der Link: Test Website Link

Answer 1

Sie haben jQuery-Code, der Ihr DOM ändert, wenn Sie einen Wert in der Dropdown-Kategorie auswählen.

Insbesondere diese Zeile wird $('#file1').show(); genannt, die das Problem verursacht, wenn Sie eine Kategorie auswählen.

Jetzt $('#file1') Block hat Dateieingangs-Tags, die nicht reagieren, die Ihre UI brechen. Die Eingabe-Tags haben die IDs gallery, gallery2 and gallery3 für jeden Wert der Kategorie.

Für jede Eingabe-Tag müssen Sie eine 100% Breite geben, um es ansprechend zu machen. Dann wird es funktionieren.

/* Add this CSS */ 

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

Answer 2

diese CSS hinzufügen!

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

Und stellen Sie sicher textarea in .form-field > .col2-2 gestellt werden muss. Sieh es!