Advanced search form not working properly visually

[pepe_lepew1962]

Hello:

I am trying to get an "Advanced Search" form going and it just isn't working. I have searched google to death and find more about text field searchs and now struggle with this. The idea is to click a command button and the bottom portion of the form opens up and displays the options. I have the javascript in place ( hide/show ) but I just can't get my tables into the area. Currently I have 3 tables across at 30% each ( I might make 2 at 45% ) that go to 100% when the screen size is 480px. I can figure out the php for that part of the fields. Whether 1, 2 or 3, the tables should be centered to make it look better. I know I need another media query but don't care just yet. Also, for some reason a box appears in the advanced area that I do not know where it came from. Because javascript works I think this belongs here, or html. The advanced search options could have many rows of these tables so flexibility would be great. Here is my link to see what it looks like, please help.

http://www.pepelepew1962.x10.mx/search.html

[Beverleyh]

The extra cell showing under the ADVANCED SEARCH button is there because you're hiding the contents, but the cell structure is still present;

               <table border="1" width="100%" bordercolor="#008000" id="table1">
                  <tr>
                     <td>
                        <input type=button OnClick="toggle_it('pr1')" VALUE="ADVANCED SEARCH">
                     </td>
                  </tr>
                  <tr> 
                    <td colspan="2"> 
                        <table width="100%"  id="pr1" name="police_response1" style="display:none;">
                           <tr> 
                              <td align="right">Replace with the 3 tables:
                              <p><input name="fielder1" type="textbox" class="style7" value='' size='12'></p>
                              <p><input name="fielder2" type="textbox" class="style7" value='' size='12'></p>
                              <br />
                              </td>
                            </tr> 
                        </table> 
                     </td> 
                  </tr>
               </table>

With the markup in red set to display:none;, the #table1 table still displays the <tr> and <td>. If you don't want that to happen, move the id and style to the <tr>;

               <table border="1" width="100%" bordercolor="#008000" id="table1">
                  <tr>
                     <td>
                        <input type=button OnClick="toggle_it('pr1')" VALUE="ADVANCED SEARCH">
                     </td>
                  </tr>
                  <tr id="pr1" style="display:none;"> 
                    <td colspan="2">  
                        <table width="100%" name="police_response1" >
                           <tr> 
                              <td align="right">Replace with the 3 tables:
                              <p><input name="fielder1" type="textbox" class="style7" value='' size='12'></p>
                              <p><input name="fielder2" type="textbox" class="style7" value='' size='12'></p>
                              <br />
                              </td>
                            </tr> 
                        </table> 
                     </td> 
                  </tr>
               </table>

Also, remove the name attribute in the <table> tag - it isn't a valid table attribute.

To center the 3 tables, its probably easiest to wrap them in a div with styles as; <div style="margin:auto; width:90%">, and change the width of the 3 tables from 30% to 33% each. Let the outer div set the width and margin (margin:auto; is what centers) and the inner tables expand to 100% of their container.

[pepe_lepew1962]

Hello:

Ok, I kind of have something working now. If you click the "ADVANCE SEARCH" button the table opens up and now has 3 boxes. Each box has a mini description of what I would like. So the first box says that this area/content should be replaced with the much lower Table1. The next box to be replaced with Table2 and finally box 3 is to be replaced with Table3. I have 10px as right margins on the divs only to show a separation visually. I know tables are NOT to be used for forms, but the exact form code will also be used to display mysql data on a later page.

http://www.pepelepew1962.x10.mx/search.html

[Beverleyh]

I'm not sure what you're asking now but those tables are starting to cause problems. You've introduced some bad formatting which is causing web browsers to auto-correct and give you the same empty cell issue as before. I've highlighted in red where things begin to go wrong. See how you've introduced an opening table tag without opening a new row or cell from the parent table? And then see the double closing table tag at the end?

               <table border="1" width="100%" bordercolor="#008000" id="table1">
                  <tr>
                     <td>
                        <input type=button OnClick="toggle_it('pr1')" VALUE="ADVANCED SEARCH">
                     </td>
                  </tr>
                  <table>
                     <tr id="pr1" style="display:none;">

                        <td colspan="2">  
                           <table width="100%" name="police_response1" >
                              <tr> 
                                 <td align="right">Replace this box with below Table1:
                                 <p><input name="fielder1" type="textbox" class="style7" value='' size='12'></p>
                                 <p><input name="fielder2" type="textbox" class="style7" value='' size='12'></p>
                                 <br />
                                 </td>
                              </tr> 
                           </table> 
                        </td>

                        <td colspan="2">  
                           <table width="100%" name="police_response2" >
                              <tr> 
                                 <td align="right">Replace this box with below Table2:
                                 <p><input name="fielder1" type="textbox" class="style7" value='' size='12'></p>
                                 <p><input name="fielder2" type="textbox" class="style7" value='' size='12'></p>
                                 <br />
                                 </td>
                              </tr> 
                           </table> 
                        </td>

                        <td colspan="2">  
                           <table width="100%" name="police_response3" >
                              <tr> 
                                 <td align="right">Replace this box with below Table3:
                                 <p><input name="fielder1" type="textbox" class="style7" value='' size='12'></p>
                                 <p><input name="fielder2" type="textbox" class="style7" value='' size='12'></p>
                                 <br />
                                 </td>
                              </tr> 
                           </table>
                        </td>

                     </tr>
                  </table>
               </table>

Fix the formatting and also make sure that this line appears in the place where previously advised - like this;

               <table border="1" width="100%" bordercolor="#008000" id="table1">
                  <tr>
                     <td>
                        <input type=button OnClick="toggle_it('pr1')" VALUE="ADVANCED SEARCH">
                     </td>
                  </tr>
                  <tr id="pr1" style="display:none;"> 

what are the coldpan="2" attributes for? They don't look to be doing anything so take them out.

[pepe_lepew1962]

OMFG, I am now sooo close, don't give up on me just yet. I have basically what I am looking for except 2 things. Please see the links to compared what I was trying to explain. My issues are now:

1. I would like a blank, invisible row between the first row of 3 tables and the next row of 3. I do not know how many blank rows I will need because I don't know how many rows of tables I will have, but perhaps a div with a height of 10px??? Either way, I can't figure it out, so if you could help, wicked.

2. I would like to center the individual tables. So, that means the 3 tables in the first row are centered. Later, when I add media queries and it goes from 3 tables in the row to 2, it will center and finally, when I go to 1 table per row, 480px, it will center that too.


http://www.pepelepew1962.x10.mx/search-old.html
http://www.pepelepew1962.x10.mx/search-new.html


thanks,

[Beverleyh]

I'm not really sure what you're describing but it sounds like all can be handled with the suggestion I made in one of my previous posts - i'll recap on that;

To center the 3 tables, its probably easiest to wrap them in a div with styles as; <div style="margin:auto; margin-bottom:10px; width:90%">, and change the width of the 3 tables from 30% to 33% each. Let the outer div set the width and margin (margin:auto; is what centers) and the inner tables expand to 100% of their container.

The only difference would be the addition of some margin-bottom that would give space between that row of tables and any positioned below.

And of course it would be up to you to define the appropriate width of the tables at given breakpoints in your media queries, so at whatever width you would switch the width of 2 tables to 50% each and at 1 table, 100% wide. That's easiest done by setting classes on the tables so you can target them in the media queries (don't hardcode the width in the table tag)