Home > DeveloperSection > Forums > Dropdown list open/hide behind another dropdown list on IE 7
Mark Devid
Mark Devid

Total Post:101

Points:707
Posted on    April-16-2013 1:37 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 1 Reply(s)
 959  View(s)
Rate this:
Hi Expert!

I have created two dropdown list on html page. That's working fine on IE 10, IE 9 , IE 8 and other browser such that Firefox, Chrome , Opera, Safari but not work on IE 7. On IE 7 it hide behind another dropdown list, see image


Line of code are given below

HTML code

<html>
<head>
    <title>Index</title>
    <link href="../../Content/dd1.css" rel="stylesheet" type="text/css" />
</head>
<body style="background-color: #4876b9;">
    <table style="">
        <tr>
            <td>
                <select id="ItemList1" name="ItemList1" style="width: 240px; position: relative;
                    z-index: 0;">
                    <option value="" tooltipdata="">Item 1</option>
                    <option value="" tooltipdata="">Item 2</option>
                    <option value="" tooltipdata="">Item 3</option>
                    <option value="" tooltipdata="">Item 4</option>
                    <option value="" tooltipdata="">Item 5</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <select id="ItemList2" name="Application" style="width: 240px;">
                    <option value="" tooltipdata="">Item 6</option>
                    <option value="" tooltipdata="">Item 7</option>
                    <option value="" tooltipdata="">Item 8</option>
                    <option value="" tooltipdata="">Item 9</option>
                    <option value="" tooltipdata="">Item 10</option>
                </select>
            </td>
        </tr>
    </table>
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/dropdown/jquery.dd.js")" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            jQuery.noConflict();
            jQuery("#ItemList1").msDropDown({ mainCSS: 'dd2' });
            jQuery("#ItemList2").msDropDown({ mainCSS: 'dd2' });
        });
    </script>
</body>
</html>
Dropdown List CSS (dd1.css)

.dd2
{
    text-align: left;
    background-color: #E5E5E5;
    font-family: TradeGothic;
    font-style: oblique;
    font-size: 14px;
    color: #000000;
    position: relative;
}
.dd2 .ddTitle
{
    text-indent: 0;
    cursor: default;
    overflow: hidden;
    height: 25px;
}
.dd2 .ddTitle span.arrow
{
    background: transparent url(../../Content/icon-arrow.gif) no-repeat 0 0;
    float: right;
    display: inline-block;
    width: 25px;
    height: 25px;
    cursor: pointer; 
    position: relative;
}

.dd2 .ddTitle span.ddTitleText
{
    text-indent: 1px;
    overflow: hidden;
    line-height: 25px;
    margin-left: 5px;
    font-family: TradeGothic;
    font-style: oblique;
    font-size: 14px;
}
.dd2 .ddTitle span.ddTitleText img
{

}
.dd2 .ddTitle img.selected
{

    vertical-align: top;
}
.dd2 .ddChild
{
    position: absolute;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-top: none;
    display: none;
    margin: 0;
    width: auto;
    overflow: auto;
    overflow-x: hidden !important;
    font-size: 14px;
}
.dd2 .ddChild .opta a, .dd2 .ddChild .opta a:visited
{
    padding-left: 10px;
}
.dd2 .ddChild a
{
    display: block;
    text-decoration: none;
    color: #000;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    padding-left: 10px;
    padding-top: 1px;
    margin-bottom: 0px;
    height: 25px;
    line-height: 25px;
}
.dd2 .ddChild a:hover
{
    background-color: #d21c1c;
    color: #fff;
}
.dd2 .ddChild a img
{
    border: 0;
    padding: 0 2px 0 0;
    vertical-align: middle;
}
.dd2 .borderTop
{
    border-top: 1px solid #c3c3c3 !important;
}
.dd2 .noBorderTop
{
    border-top: none 0 !important;
}


Please help me!

Thanks in advance!


AVADHESH PATEL

Total Post:604

Points:4228
Posted on    April-16-2013 8:23 AM

Hi Mark!

set parent element position- relative with z-index 1 dynamically. Get the help from  below line of code. I home it resolve your problem. 

<div id="list1" class="getid" style="width: 240px;">
<select id="ItemList1" name="ItemList1" style="width: 240px; position: relative;
                    z-index: 0;">
                    <option value="" tooltipdata="">Item 1</option>
                    <option value="" tooltipdata="">Item 2</option>
                    <option value="" tooltipdata="">Item 3</option>
                    <option value="" tooltipdata="">Item 4</option>
                    <option value="" tooltipdata="">Item 5</option>
                </select>
</div>

<div id="list2" class="getid" style="width: 240px;">
<select id="ItemList2" name="Application" style="width: 240px;">
                    <option value="" tooltipdata="">Item 6</option>
                    <option value="" tooltipdata="">Item 7</option>
                    <option value="" tooltipdata="">Item 8</option>
                    <option value="" tooltipdata="">Item 9</option>
                    <option value="" tooltipdata="">Item 10</option>
                </select></div>
<style type="text/css">
    .pos
    {
        position: relative;
        z-index: 1;
    }
</style>
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        jQuery(".getid").click(function () {
            jQuery("#list1").removeClass("pos");
            jQuery("#list2").removeClass("pos");            
            var getid = jQuery(this).attr('id');
            jQuery("#" + getid).addClass("pos");
        });
    });
</script>


Don't want to miss updates? Please click the below button!

Follow MindStick