Ahmar Ali Ahmar Ali - 1 year ago 46
CSS Question

CSS Dropdown expands on responsive view

I have a form with multiple input fields. There is one particular drop down with which this problem occurs. 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).

Here are screenshots:

enter image description here

After Selection:

enter image description here


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


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

Now I have been trying to find a solution to this problem. But I am not quite sure whether it is this drop down which is causing the problem or the textarea below it. Any help would be really appreciated.

Here is the link:
Test Website Link

Answer Source

You have jQuery code which changes your DOM when you select a value in the category drop-down.

In particular this line gets called $('#file1').show(); which causes the problem when you select a category.

Now $('#file1') block has file input tags which are non-responsive which break your UI. The input tags have ids gallery, gallery2 and gallery3 for each value of category.

To each input tag you need to give a 100% width to make it responsive. Then it will work.

/* Add this CSS */

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