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:
In ff/ie10, you'll see it almosts looks like everything below is forced into the first <td> cell:
Ant help would be greatly appreciated as I have been banging my head on this for some time.
Thanks!!!!
Have something to add?