CSS下拉式擴展響應式視圖

我有一個窗體有多個輸入字段。有一個特定的下拉菜單可以解決這個問題。所有其他的下拉菜單都很好，但是當選擇此類別下拉選項時，它會導致整個佈局在響應視圖上展開（屏幕小於767px）。CSS下拉式擴展響應式視圖

以下是截圖：

選擇

後：

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

現在我一直在試圖找到解決這個問題的方法。但我不太確定是否這是導致問題或下面的textarea的下拉菜單。任何幫助將非常感激。

這裏是鏈接： Test Website Link

來源

2016-08-07 Ahmar Ali

你有jQuery代碼，當你在類別下拉列表中選擇一個值時，它會改變你的DOM。

特別是這條線被稱爲$('#file1').show();，當您選擇一個類別時會導致問題。

現在$('#file1')塊的文件輸入標記是無響應的，它會破壞你的UI。輸入標籤對於每個類別的值都有ID gallery, gallery2 and gallery3。

對於每個輸入標籤，您需要給出100％的寬度以使其響應。然後它會工作。

/* Add this CSS */ 

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

來源

2016-08-07 06:21:25

是的，這是問題:)謝謝 –

-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。看見！

來源

2016-08-07 06:07:42 Vuong

CSS下拉式擴展響應式視圖

回答

相關問題