• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

IE10/Firefox - onclick/display messes up table formatting

Guest
Oct 01, 2013 Oct 01, 2013

Copy link to clipboard

Copied

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!!!!

TOPICS
Advanced techniques

Views

533

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
no replies

Have something to add?

Join the conversation
Resources
Documentation