0 Replies Latest reply on Oct 4, 2013 12:28 PM by DettCom

    IE10/Firefox - onclick/display messes up table formatting

    DettCom Level 1

      Hello All,

       

      This was brought to my attention that when we have a toggle switch that either displays or hides cells below, it completely ruins the look. Everything has always worked correctly in previous versions but not now.

       

      Here is the code:

       

          <table class="editTable groupEditTable editTableGroup" cellpadding="0" cellspacing="0">

             <tr>

           <td class="editLabel"><span>*</span>Social Media:</td>

           <td class="editField">

            <input type="radio" name="socialmedia" id="socialmedia"<cfif editstate and item.socialmedia eq 1> checked="checked"</cfif> value="1" onclick="document.getElementById('facebook_name_row').style.display='inline'; document.getElementById('facebook_url_row').style.display='inline'; document.getElementById('facebook_app_id_row').style.display='inline'; document.getElementById('facebook_action_name_row').style.display='inline'; document.getElementById('facebook_action_link_row').style.display='inline';" />

            <label for="socialmedia">Yes</label>

            <input type="radio" name="socialmedia" id="socialmedia"<cfif NOT editstate or item.socialmedia neq 1> checked="checked"</cfif> value="0" onclick="document.getElementById('facebook_name_row').style.display='none'; document.getElementById('facebook_url_row').style.display='none'; document.getElementById('facebook_app_id_row').style.display='none'; document.getElementById('facebook_action_name_row').style.display='none'; document.getElementById('facebook_action_link_row').style.display='none';" />

            <label for="socialmedia">No</label>   

           </td>

          </tr>   

          <tr id="facebook_name_row" <cfif (editstate and item.socialmedia eq 0) or NOT editstate>style="display:none;"</cfif>>

           <td class="editLabel"><span>*</span>Facebook Name:</td>

           <td class="editField"><input type="text" name="facebook_name" <cfif editstate>value="#Trim(item.facebook_name)#"</cfif>size="50" /></td>

          </tr>

          <tr id="facebook_url_row" <cfif (editstate and item.socialmedia eq 0) or NOT editstate>style="display:none;"</cfif>>

           <td class="editLabel"><span>*</span>Facebook URL:</td>

           <td class="editField"><input type="text" name="facebook_url" <cfif editstate>value="#Trim(item.facebook_url)#"</cfif>size="50" /></td>

          </tr>

          <tr id="facebook_app_id_row" <cfif (editstate and item.socialmedia eq 0) or NOT editstate>style="display:none;"</cfif>>

           <td class="editLabel"><span>*</span>Facebook APP ID:</td>

           <td class="editField"><input type="text" name="facebook_app_id" <cfif editstate>value="#Trim(item.facebook_app_id)#"</cfif>size="50" /></td>

          </tr>

          <tr id="facebook_action_name_row" <cfif (editstate and item.socialmedia eq 0) or NOT editstate>style="display:none;"</cfif>>

           <td class="editLabel"><span>*</span>Facebook Action Name:</td>

           <td class="editField"><input type="text" name="facebook_action_name" <cfif editstate>value="#Trim(item.facebook_action_name)#"</cfif>size="50" /></td>

          </tr>

          <tr id="facebook_action_link_row" <cfif (editstate and item.socialmedia eq 0) or NOT editstate>style="display:none;"</cfif>>

           <td class="editLabel"><span>*</span>Facebook Action Link:</td>

           <td class="editField"><input type="text" name="facebook_action_link" <cfif editstate>value="#Trim(item.facebook_action_link)#"</cfif>size="50" /></td>

          </tr>

          </table>

       

      In ie8, everything look correct:

       

      good.JPG

      In ff/ie10, you'll see it almosts looks like everything below is forced into the first <td> cell:

      bad.JPG

       

      Ant help would be greatly appreciated as I have been banging my head on this for some time.

       

      Thanks!!!!