DockLayoutPanel and YUI

jd

unread,

Oct 4, 2009, 3:42:30 AM10/4/09

to Google Web Toolkit

Hi,

I am using DockLayoutPanel and have found that it seems to be
imcompatible with YUI Grids.

Specifically, when I include this on my page:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/
2.8.0r4/build/grids/grids-min.css">

The page does not layout correctly in IE6. In Safari 4.0 it seems to
work fine.

The internal "layers" appear to be offset of the right or not visible
at all.

This is not a big issue for me as I don't need to use YUI grids now
anyway... it was just a left over from using reset-fonts-grids of
which I only want the reset and fonts part. Just thought I would
mention it.

Cheers

John.

jd

unread,

Oct 4, 2009, 4:14:56 AM10/4/09

to Google Web Toolkit

... and while I am bashing IE6 - I found another issue:

When DockLayoutPanel is set to use Unit.EM I found that a child in the
east overlapped with the centre child by about 10 px. When I changed
to Unit.PX it works OK. Again, in Safari Unit.EM worked fine.

Bring on Chrome Frame!

jgw

unread,

Oct 5, 2009, 3:12:49 PM10/5/09

to Google Web Toolkit

Could you post code that reproduces either of these cases? The yui-
grids thing sounds a little odd, but I'd still like to look into it.
But a DockLayoutPanel not working properly on IE6 is very surprising,
as those cases should already be tested (and because I've tested them
manually). Again, code would be really helpful.

Thanks,
joel.

John Patterson

unread,

Oct 5, 2009, 4:01:16 PM10/5/09

to google-we...@googlegroups.com

Right, I have reverted my code to use EM's and can see the problem again. The code below also shows the problem. It uses a map in the centre panel and I am not sure if this is where the problem arises.

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

</body>

</html>

public void onModuleLoad()

{

DockLayoutPanel p = new DockLayoutPanel(Unit.EM);

p.addNorth(new HTML("north"), 3);

p.addSouth(new HTML("south"), 3);

p.addEast(new HTML("east"), 10);

p.addWest(new HTML("west"), 10);

MapWidget map = new MapWidget(LatLng.newInstance(-41.1, 174.8), 5);

p.add(map);

p.layout();

RootLayoutPanel rp = RootLayoutPanel.get();

rp.add(p);

rp.layout();

map.checkResizeAndCenter();

}

Not sure if this image will make it into my reply:

it shows the word "East" is partly obscured by the map. Possibly only by 5px

My IE6 is 6.0.2900.2180.xpsp running on XP professional SP2 on Parallels

Hope this helps!

John

skrat

unread,

Nov 10, 2009, 8:49:34 AM11/10/09

to Google Web Toolkit

I also got trouble with DockLayoutPanel and IE6, and it doesn't have
anything with Unit.EM. I use Unit.PX, and in FF/Safari I got proper
styles on child widgets, that is

right: 0px; bottom: 0px; position: absolute; left: 0px; top: 0px;

and in IE6

there is something containing width:32px , how's that even possible,
where's that 32 coming from? Bulgaria?

On Oct 5, 9:01 pm, John Patterson <jdpatter...@gmail.com> wrote:
> Right, I have reverted my code to use EM's and can see the problem
> again. The code below also shows the problem. It uses a map in the
> centre panel and I am not sure if this is where the problem arises.
>
> <!DOCTYPE HTML>
>
> <html>
> <head>
> <meta http-equiv="content-type" content="text/html; charset=UTF-8">

> <script src="http://maps.google.com/maps?gwt=1&file=api&v=2&sensor=false

> "></script>
> <script type="text/javascript" language="javascript"
> src="search.nocache.js"></script>
>
> </head>
>
> <body>
> </body>
>
> </html>
>
> public void onModuleLoad()
> {
> DockLayoutPanel p = new DockLayoutPanel(Unit.EM);
> p.addNorth(new HTML("north"), 3);
> p.addSouth(new HTML("south"), 3);
> p.addEast(new HTML("east"), 10);
> p.addWest(new HTML("west"), 10);
>
> MapWidget map = new MapWidget(LatLng.newInstance(-41.1, 174.8), 5);
> p.add(map);
>
> p.layout();
>
> RootLayoutPanel rp = RootLayoutPanel.get();
> rp.add(p);
>
> rp.layout();
>
> map.checkResizeAndCenter();
> }
>
> Not sure if this image will make it into my reply:
>

Reply all

Reply to author

Forward