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

Cflloop, Tables and CSS

Explorer ,
Jan 19, 2012 Jan 19, 2012

Copy link to clipboard

Copied

I have a web application that has an iframe (believe me it is necessary) split 69/30.  On the 30 portion of the page I have several tables that are stacked upon each other. 

All tables are designated with the following:

<table width="100%" border="3" borderColor="##c0504d">

Several of the tables are being hidden using the [id = #Varidable# style="display:none"] property.  The hidden tables are created by a <CFLOOP query=foo>.    Here is the problem the tables within the CFLOOP are not the same width as the tables outside of the CFLOOP.  The are just a tad wider. 

Here is a snippet of the actual code:

<CFOUTPUT>

     <table width="100%" border="3" borderColor="##c0504d">

          <TR>

               <th width="20%" align="Right">Risk:</th>

               <td width="80%" align="left">

                    #ThisTitle#

               </td>    

                                   </TR>

                                   <TR>

                                                  <th align="Right" valign="top">Risk Statement:</th>

                                                  <td align="left">

                                                                 #GetThisRiskInfo.RiskStatement#

                                                  </td>

                                   </TR>

                    </table>

                    <table width="100%" border="3" borderColor="##c0504d">

                                   <TR>

                                                  <td colspan="#zcount#">

                                                            <CFLOOP query="GetMission">#GetMission.CurrentRow#<BR>

                                                                           <CFIF GetMission.CurrentRow EQ 1>

                                                                                          <CFSET HideArray1 = "ShowMission#GetMission.MissionID#">

                                                                           <CFELSE>

                                                                                          <CFSET HideArray1 = HideArray1 & ", ShowMission#GetMission.MissionID#">

                                                                           </CFIF>

                                                            </CFLOOP>

                                                            <CFLOOP query="GetMission">

                                                                           <input type="radio" name="xMissionID" value="#GetMission.MissionID#" onClick="javascript:HideNShow('#HideArray1#', 'ShowMission#GetMission.MissionID#')">#GetMission.MissionName# <CFIF #CurrentRow# NEQ #GetMission.RecordCount#> | </CFIF>

                                                            </CFLOOP>

                                                  </td>

            </TR>

                    </table>

<CFLOOP query="GetMission">

                         <table width="100%" border="3" borderColor="C0504D" id="ShowMission#GetMission.MissionID#" style="display:none">

                                             <tr>

                                                            <td colspan="#ZCOUNT#" align="center">

                                                                           <strong>#GetMission.MissionName#</strong>

                                                            </td>

          </tr>

          <tr>

               <td>

... etc blah etc

               </td>

          </tr>

     </table>

</CFLOOP>

</CFOUTPUT>

What can I do to alleviate the problem with the table borders not aligning?

Thanks!

Views

1.2K

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

correct answers 1 Correct answer

Explorer , Jan 19, 2012 Jan 19, 2012

Sarcasm is not appreciated. 

The issue ended up being that additional data within the <table> tag.    I wrapped the table tag within the <CFLOOP> with a <div> and placed the ID and style tags in the div and the formatting issue went away.  So

<table width="100%" border="3" borderColor="C0504D" id="ShowMission#GetMission.MissionID#" style="display:none">


became:

<div id="ShowMission#GetMission.MissionID#" style="display:none">

                    <table width="100%" border="3" borderColor="C0504D">

tableError.png

...

Votes

Translate

Translate
Valorous Hero ,
Jan 19, 2012 Jan 19, 2012

Copy link to clipboard

Copied

Copy the HTML output to a static HTML file.

Modify the HTML to alleviate that problem you are having.  Likely culprits are cell content that is stretching the table and|or whitespace in places that whitespace can cause problems.  Whitespace shouldn't cause probelms in HTML, but sometimes it still does.

Once you have the HTML working properly, port it back into the CFML page so that ColdFusion produces the desire HTML.

THen pray and hope that you can someday make a better and easier to maintain layout.

Votes

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
Explorer ,
Jan 19, 2012 Jan 19, 2012

Copy link to clipboard

Copied

Sarcasm is not appreciated. 

The issue ended up being that additional data within the <table> tag.    I wrapped the table tag within the <CFLOOP> with a <div> and placed the ID and style tags in the div and the formatting issue went away.  So

<table width="100%" border="3" borderColor="C0504D" id="ShowMission#GetMission.MissionID#" style="display:none">


became:

<div id="ShowMission#GetMission.MissionID#" style="display:none">

                    <table width="100%" border="3" borderColor="C0504D">

tableError.png  tableError2.png

Votes

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
Valorous Hero ,
Jan 19, 2012 Jan 19, 2012

Copy link to clipboard

Copied

I am glad you found an answer, though I find it to be a bit of a strange answer.

But that was not a sarcastic reply.  That is exactly how I would debug a complex display issue like this.  Remove the dynamic from the system until I solved the output issue.

It is usually not that dificult to export the generate HTML from a browser into a file where one can then play with the elements to figure out what is causing the issue and then determine how to mitigate it.  Then one just needs to migrate the discovered solution back to the dynamic system.

Votes

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
Explorer ,
Jan 19, 2012 Jan 19, 2012

Copy link to clipboard

Copied

LATEST

Indeed the resolution was not of the ordinary variety. 

I apologize for taking offense if none was intended.

Votes

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
Guide ,
Jan 19, 2012 Jan 19, 2012

Copy link to clipboard

Copied

Kkofal wrote:

Sarcasm is not appreciated.

In ilssac's defence, I'm pretty sure there was no sarcasm intended there. If you want someone to fix your code, go pay a consultant. If you want people to look at your problem for free in their spare time, accept you might not always get answers back in word-for-word how you'd like.

Votes

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
Resources
Documentation