Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Select drop-down list possible to "Drop-Up"

The <select><option>foo</option></select> drop-down is too close to the bottom of the page. I would like the drop-down to "drop-up". I have been searching but only able to pull up information on navigation menus. I tried giving the <select class="select-store"> a top:100% and bottom:100% being position:absolute which is what I saw for navigation menu dropdowns to "drop-up" without prevail. Is this possible? Thank you guys in advance, code is below;

HTML

<select class="select-store" onchange="document.location.href=this.value">
  <option value="/">Store Finder</option>
  <option value="/foo">foo</option>
  <option value="/beta">beta</option>
</select>

CSS

#finder .select-store{
  background: url("/images/storefinder_bg.png") no-repeat scroll 0 0 transparent;
  border: medium none;
  color: #5B5A5A;
  font-family: UNIV-C,Arial,Helvetica,sans-serif;
  font-size: 16px;
  font-weight: normal;
  height: 32px;
  line-height: 16px;
  padding: 3px;
  vertical-align: middle;
  width: 186px;
}
like image 673
ac12 Avatar asked Sep 20 '13 14:09

ac12


1 Answers

SELECT element behaviour is determined by the browser. It alone detects overflow outside of the viewport and will sometimes reposition the list. You can't control this directly.

Now if you use a script-based simulated SELECT, the you can detect overflow in your the JS code and reposition accordingly.

like image 162
Diodeus - James MacFarlane Avatar answered Sep 19 '22 12:09

Diodeus - James MacFarlane