cfwindow kills formatting in cf9

Report · Mar 06, 2010

I recently upgraded to cf9 and the cfwindow includes are stripping out the table cellpadding and cellspacing. This was not an issue in cf8.

Whenever I include the cfwindow tag in cf9 the page its on looks terrible and even makes the app look differently inside the ie browser.

Why?

Does anyone know how to fix this?

Report · Mar 07, 2010

Can you post some code that demonstrates what you're seeing?

--

Adam

Report · Mar 08, 2010

I'll get an example up on a website (the other is protected by login/pass) but the basic idea is...

<tr>

<td>

Code with a cfwindow link

</td>

</tr>

</table>

Should have a padding of 6 and a width of 50% of that page.

However, if the cfwindow code is included on that page (I do at the bottom), the table will have no padding, and it will have a width that spans 100% of the page as opposed to 50%. This did not happen with cf8.

Report · Mar 08, 2010

OK... that code you posted? Doesn't demonstrate anything about any problems with <cfwindow>, because there's no <cfwindow> tag in it.

Post some code that we can run that replicates the problem you're seeing. Post as little code as possible - devoid of any code that's irrelevant to the replication case - but post enough code that we can save to a file and run and see the problem.

--

Adam

Report · Mar 08, 2010

http://kyndoutdoors.com/test.cfm

Notice that the with page does have a cfwindow include. For some reason it is destroying the table formatting. There is no padding in the page or in the cfwindow popup. There should be.

The without page is how the padding should appear.

Please tell me how to fix this. I'm assuming I'll need to change cf9's .css pages???

Report · Mar 08, 2010

[frustration]

Post the frickin' code!!

Not a description of the code. Not half the code. Not a URL which shows the code being run.

Post. The. Code.

Please.

I don't want to see it running, I want to run it myself and have a look at what you're doing, run some tests, and try to fix it. You are not providing enough info (the info being "the code") to do this. I do not want to write my own code because it might be a vagary of what you're doing that makes it not work, so I want to see your code.

--

Adam

Report · Mar 08, 2010

<title>Calm down please</title>
<link href="http://www.kyndoutdoors.com/newsite/_kynd-css/main.css" rel="stylesheet" type="text/css" item="text/css">

</head>

<body>

<table cellpadding="12" border="2" width="50%">
<tr>
<td align="center"><h3>Testing</h3></td>
</tr>
<tr>
<td align="center"><h2>This table should have a cellpadding of 12. This page does contain a cfwindow include.</h4><a href="##" onClick="javascript:ColdFusion.Window.show('water_window')">Click here</a> to see the window</td>
</tr>
<tr>
<td align="center">*Please not that the page looks strange inside the browser window (different at the top and left inside the browser) in addition to losing the padding when cfwindow is included.</td>
</tr>
</table>

</body>

</html>

<cfwindow

name="water_window"

center="true"

modal="true"

resizeable="false"

draggable="false"

hright="500"

width="500"

closable="true"

initshow="false"

refreshonshow="true"

source="cfwindow.cfm"/>

Report · Mar 08, 2010

I'm perfectly calm, thank-you.

I've factored down your code to this:

That's sufficient to demonstrate the issue.

If you look at the styles being applied by CF's AJAX stuff, there's this:

html,body,div,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}

So that kinda explains where the padding goes.

It's a bit sh!t of ext-js to be setting that across the board.

But you can circumvent it by doing your table padding and borders with CSS, not with HTML attributes.

--

Adam

Report · Mar 08, 2010

Thank you. That does help. I figured out how to use css to get the original design back in my tables. However, the way the page renders inside the browser is still a bit off. At the top of the browser window under the tabs, the pages are supposed to have a border that is standard with ie. However when I display the page with cfwindow, it no longer appears. In the attached image, I show a page with (on top) and without (on bottom) the cfwindow code to help explain what I mean. I would like to make it look like it normally does (like the screenshot on the bottom of the image).

Report · Mar 08, 2010

It'll just be another CSS issue.

I recommend you stop using IE for doing your UI tweaking, instead using Firefox with Firebug installed. This enables you to select an object on the screen, and view all the styling that is contributing to its appearance.

Fix the CSS in Firefox, and then verify it looking OK in IE.

--

Adam

Report · Mar 09, 2010

Do you know which css element I should focus on? Body? Html? dd? I could go through tinkering with each but if anyone knows a more efficient approach that would be nice.

Report · Mar 09, 2010

Did you install Firefox & Firebug? Firebug lets you select the element that is displaying wrong, and will show you the CSS contributing to the wrongness. It'll even let you switch off & adjust CSS elements on the fly so you can tinker in real time".

--

Adam