javascript - How would I control the position of a drop down select menu? - Stack Overflow

admin2025-04-20 0

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(".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(".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>

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./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./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>

Share Improve this question edited Oct 27, 2013 at 19:24 asked Oct 27, 2013 at 19:09 Marlon Fowler 1213 gold badges4 silver badges16 bronze badges

2 Could you make a jsfiddle or add some more code for me to make a fiddle? – Josh Powell Commented Oct 27, 2013 at 19:13
if you are talking about <select> tag use a plugin that replaces it. IE particularly is difficult when dealing with <select> and that's why many plugins have been devloped. There is very little you can do to change browser default behavior – charlietfl Commented Oct 27, 2013 at 19:17
Josh, I added the HTML. – Marlon Fowler Commented Oct 27, 2013 at 19:25

Add a ment |

2 Answers 2

Sorted by: Reset to default 1

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?

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 autoplete list (jquery ui autoplete for example), with fewer options. It would probably improve user experience too :).

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745112912a285685.html

javascriptHow would I control the position of a drop down select menuStack Overflow

最新回复(0)