Geek Answers Handbook

Text Box / Dropdown Combination

I am trying to "combine" a text box and a drop-down list. I can't seem to align them.

enter image description here

My code is:

<input name="" type="text" maxlength="50" style="width: 665px; padding:0px; z-index: 2; position: absolute;" /> <select name="" style="z-index: 1; width: 695px; padding:0px; position:absolute;"> <option value="Value for Item 1" title="Title for Item 1">Item 1</option> <option value="Value for Item 2" title="Title for Item 2">Item 2</option> <option value="Value for Item 3" title="Title for Item 3">Item 3</option> </select>
+4
source share
3 answers

I created a demo for you here: http://jsfiddle.net/aJaa6/

* note that I changed the width to fit in the panel.

CSS

 #container { position: relative; } #input { position: absolute; top: 0; left: 0; z-index: 999; padding: 0; margin: 0; } #select { position: absolute; top: 0; left: 0; padding: 0; margin: 0; }

Markup:

 <div id="container"> <input id="input" name="" type="" style="width: 100px;"> <br> <select id="select" name="" style="width: 115px;"> <option value="Value for Item 1" title="Title for Item 1">Item 1</option> <option value="Value for Item 2" title="Title for Item 2">Item 2</option> <option value="Value for Item 3" title="Title for Item 3">Item 3</option> </select> </div>
+3
source

Do you consider using FlexBox ? It does what you want, and it has many nice customizable features.

+1
source

If you do not want to randomly deal with absolute positions, this is the way when you click on a text field, it displays a drop-down menu. I did not add in javascript to hide the dropdown menu when you click again, but this should be pretty easy to do.

  <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> function showDrop(){ $('#select').attr('size',3); $("#select").show(); } function populateTextBox(){ var val = $("#select option:selected").text(); $("#input").val(val); } </script> </head> <body> <div id="container"> <input id="input" name="" type="" style="width: 100px;" onclick="showDrop();" /> <br> <select id="select" name="" style="display:none;width: 100px;" onclick="populateTextBox();"> <option value="Value for Item 1" title="Title for Item 1">Item 1</option> <option value="Value for Item 2" title="Title for Item 2">Item 2</option> <option value="Value for Item 3" title="Title for Item 3">Item 3</option> </select> </div> </body> </html>
0
source

More articles:


All Articles