I am trying to get a drop down list (combo box) in an html table. I have inserted the same code that I use to put a drop down list in a text box in a form into a table element (at least I think it is the same code - it looks the same to me). It works except for one thing. Instead of giving me a combo box it gives me a list box. I attached a picture of the result. The problem is obviously that it makes the table way too large.
So then I thought I could force it to a smaller table row. I put the style statement with a height:18px value. It made the rows the correct height but I get the double arrow of a list box rather than a single down arrow of a combo box (drop down box). I attached a 2nd picture for this one too.
Is there a trick to getting this to work. I had to force a select on each table row to make it work properly. Otherwise it gave me an index error. I could not find any examples with the following google search "html list box versus combo box".
Currently I am doing a google search "html list box versus drop down list" to see if I missed something. I have never used a list box.
I found one suggestion to put in class='dropdown'. I tried this after both the <td and the <select and I get the same results.
I was reading this quote:
So I tried that (putting the select inside the <input type=textbox> statement and it does not work.a combo box is a combination of an input text field and a list of options. You can type in stuff in the input field and the list should update to highlight a possible match
I resorted to my google search trick with this string "html <td> <select > <option </option> </select> </td>"
and I found this example which seems to work. http://jsfiddle.net/5FyCA/
Trying to find the difference.
Thanks,
John
the original attempt.
Code: Select all
$CurrRow = 0;
while($CurrRow <= 9) {
$CurrRow = $CurrRow + 1;
echo("<tr>\n");
echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' ><input type='textbox' name='NewSongName[]' value='' size=35 ></td>\n");
//echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' > <input type='textbox' name='NewFakeBook[]' value='' size=9 > </td>\n");
echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' >
<select name='NewFakeBook[]' size='9' style='height:18px;' id='Combobox_FakeBook'>
<option value=SelectFakebook selected>Select</option>
<option value=RB_BC_V1>RB_BC_V1</option>
<option value=RB_BC_V2>RB_BC_V2</option>
<option value=RB_BC_V3>RB_BC_V3</option>
</select>
</td>\n");
echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' ><input type='textbox' name='NewBPM[]' value='' size=1 ></td>\n");
echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' ><input type='textbox' name='NewSinging[]' value='' size=2 ></td>\n");
echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' ><input type='textbox' name='NewSemiToneShift[]' value='' size=8 ></td>\n");
echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' ><input type='textbox' name='NewSoloing[]' value='' size=2 ></td>\n");
echo("</tr>\n");
} //while($CurrRow <= 9) {
with 'height:18px;'
Code: Select all
$CurrRow = 0;
while($CurrRow <= 9) {
$CurrRow = $CurrRow + 1;
echo("<tr>\n");
echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' ><input type='textbox' name='NewSongName[]' value='' size=35 ></td>\n");
//echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' > <input type='textbox' name='NewFakeBook[]' value='' size=9 > </td>\n");
echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' >
<select name='NewFakeBook[]' size='9' style='height:18px;' id='Combobox_FakeBook'>
<option value=SelectFakebook selected>Select</option>
<option value=RB_BC_V1>RB_BC_V1</option>
<option value=RB_BC_V2>RB_BC_V2</option>
<option value=RB_BC_V3>RB_BC_V3</option>
</select>
</td>\n");
echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' ><input type='textbox' name='NewBPM[]' value='' size=1 ></td>\n");
echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' ><input type='textbox' name='NewSinging[]' value='' size=2 ></td>\n");
echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' ><input type='textbox' name='NewSemiToneShift[]' value='' size=8 ></td>\n");
echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' ><input type='textbox' name='NewSoloing[]' value='' size=2 ></td>\n");
echo("</tr>\n");
} //while($CurrRow <= 9) {
Code: Select all
echo("<td class='dropdown' style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;'>
<select class='dropdown' name='FakeBookLookup' size='9' id='Combobox_FakeBook' >
<option value=SelectFakebook selected>Select</option>
<option value=RB_BC_V1>RB_BC_V1</option>
<option value=RB_BC_V2>RB_BC_V2</option>
<option value=RB_BC_V3>RB_BC_V3</option>
</select>