How would I control the position of a drop down select menu?


Tags: javascript,jquery,html,css

Problem :

I have a drop down select menu, and I wanted to know if there is a way to control the way in which the options expand? The default seems to go either way and depends on how many items are in the list.

I would like to prevent the drop down options from displaying up and over the other form fields. When you select 'country' from the list, the menu expands downward (where I want it), but when you select an option from the 'state/region' field that has quite a few different choices (such as the UK) the menu expands up and over the other form fields, something I don't want. Anyway to fix this?

Here is my CSS ----->

#country {
    position:relative;
    background-image:url(../images/drop-down-selector.svg);
    background-position:260px, center;
    background-repeat:no-repeat;
    -webkit-appearance:none;
    -moz-appearance:none;
    box-shadow:0px 0px 0px 1px #b5e7ff;
    border:none;
    outline:none;
    left:2px;
    width:292px;
    height:47px;
    font-size:1.5em;
    font-family:'gotham-medium', arial, sans-serif;
    src:url("http://www.3elementsreview.com/fonts/gotham-medium.otf");
    color:#5fccff;
    border-radius:0;
}

#state {
    position:relative;
    background-image:url(../images/drop-down-selector.svg);
    background-position:260px, center;
    background-repeat:no-repeat;
    -webkit-appearance:none;
    -moz-appearance:none;
    box-shadow:0px 0px 0px 1px #b5e7ff;
    border:none;
    outline:none;
    left:2px;
    width:292px;
    height:47px;
    font-size:1.5em;
    font-family:'gotham-medium', arial, sans-serif;
    src:url("http://www.3elementsreview.com/fonts/gotham-medium.otf");
    color:#5fccff;
    border-radius:0;
}

Additional code ----->

<select name="Country" id="country">
    <option value="">-Country-</option>
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Canada">Canada</option>
    <option value="Australia">Australia</option>
    <option value="Brazil">Brazil</option>
    <option value="France">France</option>
    <option value="Italy">Italy</option>
    <option value="New Zealand">New Zealand</option>
    <option value="South Africa">South Africa</option>
</select>


Solution :

You cannot control the drop down expansion direction. This is something the browser calculates. Perhaps you can try making some workaround. Make your own custom dropdown system? Maybe have a fake select box with a second dropdown positioned elsewhere. Or avoid your problem all together with someother soluti

related: How can I control the expansion direction of a drop-down list?


    CSS Howto..

    How to Change HTML Tags Using Javascript

    How can i have CSS3 animating menu like followbubble.com

    How to place an image properly with CSS

    How to Align all inputs in a Form

    How can I make the ul list the same size as the input element in terms of width?

    How do people make sections in HTML pages? [closed]

    CSS check box, how to make an item unchecked only if another one is checked

    How to create CSS3 bounce effect

    How do I enable SASS line numbers in CSS output?

    How can I change the paragraph formatting in the SharePoint RichHtmlField

    How would I name this HTML code so I could edit it with CSS? [closed]

    How to add border to circular image on hover? css or jquery

    How to embed a font in website

    How to generate css using google chrome inspector to further use them?

    how fix bug with white lines between the cells of the table in IE11

    How to animate to position fixed?

    CSS selector hierarchy? How to reverse engineer to get the styling?

    How to make an image 'pop out' when page is loaded (using jQuery or possibly CSS transitions)

    How do I center HTML objects on an MVC 4.0 Web API using Razor application?

    How to keep my hover unchanged after it's release

    CSS - How make the page scroll over the edge of the window

    how to avoid the ID name in css file

    how to select a sibling element when hovering in CSS?

    How to center content vertically with unknown content and fixed layout

    HTML CSS, how to create a Side bar or column

    How do I change the Mailchimp subscribe button color using inline CSS?

    How to apply css styles to dynamic JavaScript array?

    How to use mapbox.js as a background so that html content and Navbar stay visible on top?

    How to remove an invisible space between div tags

    How can I use a data attribute to set a background-image in CSS?