Show-hide table content wrapping

[lisa232]

Hi All,

I have a problem with some javascript code.

I am trying to toggle display between two tables upon change of a select box ( to alternate between search forms)

eg. one called searchTableUS (displayed when USA is selected) and searchTableCA when (displayed when canada is selected)

<table  id="searchTableUS">
<tr>
<td>
  <label class="required">Check-in:</label></td>
<td id="checkIn">
  <select name="check-inMonthYear">
    <option value="10">Jan 2006</option>
  </select>                            
  <select name="check-inDay">
    <option value="10">Tue 10</option>
  </select>
</td>
</tr>
</table>
 
<table  id="searchTableCA">
<tr>
<td>
  <label class="required">Check-in:</label></td>
<td id="checkIn">
  <select name="check-inMonthYear">
    <option value="10">Jan 2006</option>
  </select>                            
  <select name="check-inDay">
    <option value="10">Tue 10</option>
  </select>
</td>
</tr>
</table>

CSS:

table.showMe,table.showMe select{
    display:block;    
}
table.hideMe,table.hideMe select{
    display:none;
}

Javascript (called onChange of select box and passes the object):

function swapSimpleSearch(obj){
 var selectedCountry = obj.options[obj.selectedIndex].value;    //get selection
 if (selectedCountry == "CA"){
   document.getElementById("searchTableUS").className = "hideMe";
   document.getElementById("searchTableCA").className = "showMe";
 }
 else{
   document.getElementById("searchTableCA").className = "hideMe";
   document.getElementById("searchTableUS").className = "showMe";
 }        
}

The problem I am having is when the hidden table is displayed, the select boxes are wrapping underneath each other instead of on the same line in the <TD>. I know its not the html as when the page first loads it looks fine. Its only when you hide it and display it again. Is there a known issue with hide/showing tables and content wrapping?

I tried adding nowrap to the td and white-space in CSS but both don't work.

Any ideas??

Thanks in advance,
Lisa

[acoder]

Try giving the td width.