same code -> different compile plattforms -> different results???

[Magnus]

Hi,

I found a strange problem: My GWT app looks different in the same
browser on the same machine, when I compile the same code on another
computer.

The details: One day I found that my form does not look right in IE7:
http://yfrog.com/gigwtproblemp

The titlebar at the top and the commandbar at the bottom, which are
HorizontalPanels at the north and south sides of a DockLayoutPanel, do
not cover 100% width. There is some piece missing at the right. I
colored them with a red frame.

I compiled the app on my linux box under eclipse 3.6 using GWT 2.0.4
and deployed it as a war file on my remote Tomcat server. Looking at
this app with IE7 on a windows box produces the ugly result shown in
the screenshot.

Now the mystery:

I compiled exactly the same code on the windows box under eclipse 3.5
but with the same GWT 2.0.4 and deployed it as a war file on the same
remote Tomcat server. Then, looking at it using the same browser IE7
produces a fine result!!!

Then, I compared the two war directories, and I found differences imn
5 files:
- <hexnumber>.cache.html
- app.nocache.js

I looked into these files but I could not understand the differences.

How can this be? The GWT plugins are of the same version.

What can I do now?

Please help!

Thank you
Magnus

[Magnus]

Hello,

could someone please ponit me into the right direction?

What can I do that my code leads to the same results on different
compilation platforms?

Thank you
Magnus

[Chris Conroy]

Well, until http://code.google.com/p/google-web-toolkit/source/detail?r=8605 the compiler could use different line endings which would result in a different hash for your .cache.html files.

Though, this would not change the appearance of your code. Most likely, you have your caching mis-configured and in one browser you are seeing a stale version.

Thank you
Magnus

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Chris Conroy
Software Engineer
Google, Atlanta

[Magnus]

Hi Chris,

could the different hash codes really lead to wrong display of
HorizontalPanels?

If I analyze the DOM with FireBug, I see no differences.

I also cleared my browser cache, but the wrong panels still reappear.

What can I do next?

Please note that this discourages me from continuing with my first GWT
App! At the moment I am not able to deploy it from my linux box so
that it looks right on IE, but it does look right if I deploy the same
from a windows box. I cannot continue until this works...

Magnus


On 23 Aug., 17:40, Chris Conroy <con...@google.com> wrote:
> Well, untilhttp://code.google.com/p/google-web-toolkit/source/detail?r=8605

> the
> compiler could use different line endings which would result in a different
> hash for your .cache.html files.
>
> Though, this would not change the appearance of your code. Most likely, you
> have your caching mis-configured and in one browser you are seeing a stale
> version.
>

> On Mon, Aug 23, 2010 at 9:40 AM, Magnus <alpineblas...@googlemail.com>wrote:
>
>
>
> > Hello,
>
> > could someone please ponit me into the right direction?
>
> > What can I do that my code leads to the same results on different
> > compilation platforms?
>
> > Thank you
> > Magnus
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Google Web Toolkit" group.
> > To post to this group, send email to google-we...@googlegroups.com.
> > To unsubscribe from this group, send email to

> > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsu...@googlegroups.com>
> > .

[Magnus]

Hi Chris,

I have found it!!! I now know what is happening, but I have not actual
a solution. But I also think this should be interesting for you GWT
developers!

First of all, I found that the computer that compiled the "bad"
version (with the bad layout), had GWT version 2.0.4, while the
computer with the "good" version had GWT version 2.0.3. I did not
realize this, because both eclipse installations had the "newest" GWT
plugin. But the eclipse instances themselves were different (3.5 and
3.6).

However, I upgraded the "good" computer to the newest versions of
eclipse and GWT (2.0.4), and the result is that it's now a "bad" one
too.

This means:
There is a layout problem, which was not present in GWT 2.0.3, but is
present in GWT 2.0.4!

Well, I also found out the reason for the problem:

In short:
IE7 processes "padding-left" and "padding-right" like "margin.-left"
and "margin-right".

In detail:
I use a HorizointalPanel as a TitleBar (or StatusBar) and I want to
place some text at the left end and at the right end of the bar. There
should be some space between the text and the left/right end of the
panel, so I used "padding-left:15px" or "padding-right: 15px" in the
CSS for the bar. This works correctly in all browsers, but in IE7 it
works like "margin-right", i. e. the whole TitleBar/StatusBar does not
cover the whole width, as shown in the screenshot I provided.

So, I know what is happening there, but I have no solution. Setting
the padding to 0px makes the bars ok, but the text is not placed fine.

I hope, this information is useful for you GWT developers and that
someone finds out, why this came with GWT 2.0.4.
And I also hope that you could point me to a solution for my
problem...

Thank you
Magnus

[Magnus]

For convenience I uploaded a minimalistic live demo with source code:
http://www.bavaria64.de:8080/LayoutProblem

[Falcon]

The problem in the example code that you posted is that the width is
getting set to 368px on the table in the inline style, which is
overriding the width: 100% that you want. Now, I'm not looking at this
with IE7, but with IE9 developer preview in IE7 standards mode, so
it's possible that there's a bug with that that's not showing me what
I should actually be seeing, but if you change width to 100% on both
the top table (class="TitleBar") and bottom table
(class="CommandBar"), then also change the height of CommandBar to
35px from 33, that should give you what you're wanting.

I think part of the problem is that GWT uses the same codepath for IE6
and IE7, so they're using an inline style fix to accomodate IE6 that's
breaking IE7. (When looking at that page in Firefox, the width on
those tables is set to 100% instead of a numeric value.)

The easiest way to fix this yourself would be to use a conditional
comment with your styles inside. e.g.:
<!--[if IE 7]>
<style type="text/css">
table.TitleBar {
width: 100% !important;
}
table.CommandBar {
width: 100% !important;
height: 35px !important;
}
</style>
<![endif]-->

Normally, I'd recommend you do this just in the IE7 code path of GWT,
but from what I remember, GWT combines IE6 and IE7 into the same
codepath by default. I'm not a big fan of !important declarations in
CSS in general, but in this case, since GWT is putting inline styles
on the element, I don't see a way around it unless you find a way to
override those styles in GWT itself, which would probably mean
manually splitting IE6 and IE7 into their own codepaths.

Hope that helps!

[Falcon]

Also, see http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#Standards

Specifically, this paragraph:

"HorizontalPanel is a bit trickier. In some cases, you can simply
replace it with a DockLayoutPanel, but that requires that you specify
its childrens' widths explicitly. The most common alternative is to
use FlowPanel, and to use the float: left; CSS property on its
children. And of course, you can continue to use HorizontalPanel
itself, as long as you take the caveats above into account."

It would appear that HorizontalPanel isn't designed to work correctly
with standards mode, which is leading to the problem you're seeing in
the first place, since widths (with margins and paddings) behave
differently in quirks mode than standards mode.

You'll probably want to see if you can fix your problem by switching
the panels you're using to panels that are designed to work correctly
in standards mode, but if that doesn't work then you can use the fix I
detailed above.

[Magnus]

Hi Falcon,

thank you very much!!!
This works perfectly!

I just copied your code in my main html file, right at the end of the
head tag.

Could you tell me how you found out that the width was set to 368 px?
In FF I have FireBug, but it did not show this width. In IE I have
nothing similar.

Another question: Why should I change the height from 35px to 33px? I
had no problem with the heigt...

Thank you again!

Now I can proceed with my app...

Magnus

[Falcon]

If the height is working for you, don't worry about changing it.

Keep in mind that GWT will actually send different code to different
browsers. The reason that you aren't seeing that value in Firebug in
Firefox was that Firefox was receiving a width of 100% and not the
368, but GWT was sending an inline style to IE6 and 7 to account for
some of the rendering problems in IE. However, that panel was designed
to be used in quirks mode, so GWT is sending values that don't work in
standards mode, which is what you're using.

I don't remember for sure if IE7 has it, but IE8 and the IE9 developer/
platform preview both have "Developer Tools" (either F12 or under
Tools) which allows you to do similar things to Firebug. The IE9
preview lets you switch between IE5, IE7, IE8, and IE9 rendering modes
while IE8 lets you switch between IE7 and IE8. I'd recommend checking
each version of the browser directly if possible as those rendering
modes don't always do a perfect job and there may be minor
differences, but at least the developer tools should get you in the
ballpark.

[Magnus]

Hi Falcon,

somhow you made me want to use only panels that work in standards
mode. So I derived my TitleBar from FlowPanel. Now the red borders are
only visible at the top and left, not at the right and bottom. In
addition the text is not v-aligned anymore.

http://www.bavaria64.de:8080/LayoutProblem

What's this with the border? I have no idea besides
setSize("100%","100%"); And what about the vertical alignment?

If I get this fixed, I would prefer the panels for standards mode over
a IE7-specific style. Would you agree that this would be better?

Thanks
Magnus

[Falcon]

If you can get away with using a FlowPanel or one of the panels they
list as working in standards-mode and still get the layout you want, I
would do that instead; that way Google should take care of the layout
issues in the different browsers and you won't have to worry about it
again.

When I was looking at your test page, I had to change the height to
get everything to display correctly (the bottom "CommandBar" was a
couple of pixels off and wasn't quite flush with the bottom of the
table), but that may have been because I was using IE9's IE7 emulation
instead of looking at it in IE7 itself. If everything is lining up
when you look at it in IE7, you're fine. =)

On Aug 30, 11:49 am, Magnus <alpineblas...@googlemail.com> wrote:
> Hi Falcon,
>

> if one should not use HorizontalPanel, would you prefer the use of
> FlowPanel over inserting the IE7 specific style?
>
> How did it come you proposed to change the height? (Maybe I have a
> problem, I don't know yet! :-))