CSSドロップダウンが応答ビューで拡大

Question

複数の入力フィールドを持つフォームがあります。この問題が発生する特定のドロップダウンが1つあります。その他のドロップダウンはすべて問題ありませんが、このカテゴリドロップダウンのオプションを選択すると、レイアウト全体が応答ビュー（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：

ここ

はスクリーンショットです0

.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

カテゴリドロップダウンで値を選択すると、DOMを変更するjQueryコードがあります。

特に、この行はカテゴリを選択すると問題の原因となる$('#file1').show();となります。

今度は$('#file1')ブロックには、あなたのUIを壊すような応答しないファイル入力タグがあります。入力タグには、カテゴリの各値に対してids 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に置かなければならないことを確認してください。それを見て！