CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Marlon Fowler
Marlon Fowler

Reputation: 121

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

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>

Upvotes: 1

Views: 16213

Answers (2)

jaredrada
jaredrada

Reputation: 1150

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 some other solution.

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

Upvotes: 1

pax162
pax162

Reputation: 4735

The browser usually controls the position of the option box of a drop down. Normally, if there is enough room to display it downwards, it will do so. It goes up because there is not enough room below.

A solution would be to control the height of the option box, by using a drop-down list plugin which allows this. Something like chosen: http://harvesthq.github.io/chosen/ . However, this will still not guarantee that the option box will always go down. For example, if the input box is just at the bottom of the page, where should the option box go?

Another solution would be to replace the drop down with an autocomplete list (jquery ui autocomplete for example), with fewer options. It would probably improve user experience too :).

Upvotes: 0

Related Questions