Why does the dropdownlist show under the div


Tags: html,css,asp.net,drop-down-menu

Problem :

I have the following ASP.net code which is a popup window shown to the user:

<div id="popupContact">
    <a id="popupContactClose" title="Close Window">x</a>
    <h3>Add a New Message</h3>
    <div id="dvFirst" class="mainSecond">
        <div id="leftdiv3" class="leftdiv">Client: </div>
        <div id="rightdiv3" class="rightdiv" style="z-index: 100;"><asp:DropDownList ID="ddlCliNewMsg" AutoPostBack="false" ClientIDMode="Static" runat="server" CssClass="chosen-select" ></asp:DropDownList></div>
    </div>
    <div id="dvSecond" class="mainSecond">
        <div id="leftdiv4" class="leftdiv">Location: </div>
        <div id="rightdiv4" class="rightdiv" style="z-index: 100;"><asp:DropDownList ID="ddlSitNewMsg" AutoPostBack="false" ClientIDMode="Static" runat="server" CssClass="chosen-select"></asp:DropDownList></div>
    </div>
    <div id="dvSixth" class="mainSecond">
        <div id="leftdiv6" class="leftdiv">Specialty: </div>
        <div id="rightdiv6" class="rightdiv" style="z-index: 100;"><asp:DropDownList ID="ddlPraNewMsg" AutoPostBack="false" ClientIDMode="Static" runat="server" CssClass="chosen-select"></asp:DropDownList></div>
   </div>
   <div id="dvThird" class="mainSecond">
        <div id="leftdiv5" class="leftdiv">Provider: </div>
        <div id="rightdiv5" class="rightdiv" style="z-index: 100;"><asp:DropDownList ID="ddlProNewMsg" AutoPostBack="false" ClientIDMode="Static" runat="server" CssClass="chosen-select"></asp:DropDownList></div>
    </div>
    <div id="dvFourth" class="mainFirst">
        <div id="leftdiv1" class="leftdivspec"><sup style="color: #FF0000; font-weight: bold;">*</sup>Message: </div>
        <div id="rightdiv1" class="rightdivspec"><asp:TextBox ID="tbMessage" ClientIDMode="Static" runat="server" TextMode="MultiLine" Columns="30" Rows="5"></asp:TextBox></div>
    </div>
    <div id="dvFifth" class="mainSecond">
        <div id="leftdiv2" class="leftdiv">Active?</div>
        <div id="rightdiv2" class="rightdiv"><asp:CheckBox ID="cbIsActive" ClientIDMode="Static" runat="server" /></div>
    </div>
    <div style="width: 96%; text-align: right; padding: 2%;">
        <asp:UpdatePanel runat="server" ID="upSubmit" ClientIDMode="Static" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="btnSubmit" ClientIDMode="Static" UseSubmitBehavior="false" OnClick="SubmitAdminMessage" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</div>

The CSS:

.mainFirst
{
    width: 95%;
    margin: auto;
    padding: 1%;
    height: 90px;
    border-bottom: 1px dotted #808080;
}
.mainSecond
{
    width: 95%;
    margin: auto;
    padding: 1%;
    height: 30px;
    border-bottom: 1px dotted #808080;
    overflow: hidden;
}
.leftdiv
{
    width: 35%;
    height: 30px;
    float: left;
    font-weight: bold;
}
.rightdiv
{
    width: 65%;
    height: 30px;
    float: left;
}

Originally when the popup window loads, it is displayed like this:

enter image description here

Whenever I select something from the dropdownlist, it goes under the DIV below it:

enter image description here

How can I modify the CSS so that each DropDownList will appear outside of the container so it will display the options?



Solution :

you can try to add " overflow: visible " to the container class


    CSS Howto..

    Using jquery/JS/CSS how do I append words to a sentence so the sentence is pushed up word by word

    CSS Horizontal Menu has wrong x-position, how to put directly under parent menu?

    How to hover a whole element to show details

    How do I make a line not return?

    How to center my images in my case?

    how to apply two kind of css to one control, one for internet explorer, another for firefox and chrome

    How to create class in a custom CSS file by JavaScript?

    How to disable the 'save image as' popup for smartphones for

    How to add Video from project directory in the background of Div

    How do you observe the width of an element in polymer?

    How to overlay/overlap two div's designed with css to look like text bubbles?

    How to use an image as a frame, and scroll inside? Simulating a phone on a website

    How to remove an element without id

    How to pop out an image inside a ul li div when the css surrounding it won't let you

    Main navigation, classes on/off. HGelp understanding how this is built

    Can someone tell me how to implement this Javascript? HTML CSS

    CSS: How to set up gradient background cross browser (only missing IE8 and IE9)

    Using Bootstrap, how do i achieve this horizontal tab layout? [closed]

    how to switch between left and right css rules using Jquery?

    How to Make a Dropdown In a Navbar Using CSS?

    How to force IE to place two div boxes next to each other in it's browser window?

    AngularJS - how to set css class for the custom directive?

    How can CSS translate elements away from one point?

    How to Horizontally Scroll Images In Single Line

    CSS Sprites - How to Align-bottom all Sprite Buttons

    How to fit height of aside to body height

    Pure CSS3 slideshow repeats the last 4 slides?

    How to apply local styles / JS to UIWebview after loading a URL

    How do I make text-transform:uppercase work properly with Greek?

    How to load and apply a CSS stylesheet at runtime in a Flex application?