CODEWITHSUNDEEP
htmlcss
Tushar
Tushar

Reputation: 87203

overlapping of two select boxes

I have two select boxes in HTML, one below the other.

Now when I click on the first select box it's content moves behind the other select box.

HTML

<form>
    <li>
        <label class="labelwid" for="partner">Select partner*</label>
            <select name="partner" id="partner" class="validate[required] text-input selectbox customselect" style="width:275px !important">
                <option value="{partnerno}">{partnername}</option>
            </select>
    </li>
    <li>
        <div class="fl"><b>Market Application</b><br />
            <select name="markappcategory[]" id="category" multiple="multiple" class="validate[required] text-input  selectbox" style="width:230px !important">
                {categoryname_html_m}
            </select>
        </div>
    </li>
</form>

Custom select is a jquery plugin for custom inputs.

CSS first select box

position:absolute; top:40px; padding:2px 0 5px 0; left:0; overflow-x:hidden; overflow-y:auto; z-index:1000; background:#fff; border:1px solid #d1cdcd; border-top:none; font-size:15px; width:265px; left:4px; height:100px;

Upvotes: 4

Views: 3705

Answers (3)

xpy
xpy

Reputation: 5621

z-indexes are compared on the same level, this means that two elements with different parents will be z-indexed in relation with their parent's z-indexes, here's an example http://jsfiddle.net/pavloschris/5tLrz/. When I encounter this kind of problems it usually is because of that.

Upvotes: 2

shriguru nayak
shriguru nayak

Reputation: 310

<form> 
    <li> 
        <label class="labelwid" for="partner" style="position: absolute; top: 10; left:10;" >Select partner*</label> 
        <select name="partner" id="partner" class="validate[required] text-input selectbox customselect" style="position: absolute; top: 10; left:200; width:275px !important"> 
            <option value="{partnerno}">{partnername}</option> 
        </select> 
    </li>   
    <li> 
        <div class="fl">
            <label style="position: absolute; top: 200; left:10;"><b>Market Application</b></label><br /> <select name="markappcategory[]" id="category" multiple="multiple" class="validate[required] text-input selectbox" style="position: absolute; top: 200; left:200; width:230px !important"> {categoryname_html_m} </select> 
        </div> 
    </li>

Try this code only. It works fine for me. change your position according to your need.

Upvotes: 1

shriguru nayak
shriguru nayak

Reputation: 310

You are not specifying the position in the style tag. Are you doing it in your CSS? if so, post the css code. Refer: http://www.w3schools.com/cssref/pr_class_position.asp for more.

Upvotes: 1

Related Questions