PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Mon May 21, 2018 9:06 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 2 posts ] 
Author Message
PostPosted: Thu Mar 29, 2018 7:29 pm 
Offline
Forum Contributor

Joined: Fri Jul 18, 2014 1:54 pm
Posts: 175
Hi

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:
Quote:
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

So I tried that (putting the select inside the <input type=textbox> statement and it does not work.

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.
Syntax: [ Download ] [ Hide ]
$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;'
Syntax: [ Download ] [ Hide ]
$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 class statement
Syntax: [ Download ] [ Hide ]
   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>


Attachments:
ListboxInTable_ForceRowsSmall.png
ListboxInTable_ForceRowsSmall.png [ 21.01 KiB | Viewed 420 times ]
ListboxInTable.png
ListboxInTable.png [ 24.84 KiB | Viewed 420 times ]
Top
 Profile  
 
PostPosted: Thu Mar 29, 2018 8:53 pm 
Offline
Forum Contributor

Joined: Fri Jul 18, 2014 1:54 pm
Posts: 175
A clean post with the resulting code that worked, a comment and an attached picture. This was a tough one. If it was not for my handy dandy google search trick (mentioned near the end of the above post) I never would have found it. I also want to get a drop down for the songs (tomorrow - time to call it a day).

Syntax: [ Download ] [ Hide ]
$CurrRow = 0;
while($CurrRow <= 9) {
   $CurrRow = $CurrRow + 1;
   //START: The example that helped me get it to work
   //       https://stackoverflow.com/questions/230 ... using-html
   //       http://jsfiddle.net/5FyCA/
   //       MY NOTE: It seems the trick is to put the class='select' in the very first TD statement for each row. It processes the name='NewFakeBook[]' correctly when I click submit on the form.
   //END: The example that helped me get it to work

   echo("<tr>\n");
   echo("<td class='select' 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><select name='NewFakeBook[]'>
                <option value='SelectFakebook' selected>SelectFakebook</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) {


Attachments:
It_Works.png
It_Works.png [ 25.34 KiB | Viewed 417 times ]
Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 2 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: Bing [Bot] and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group