TabLayoutPanel not working on IE8

[dflorey]

Hi,
I'm checking out the new LayoutPanel stuff. It seems to work great,
thanks!
Some issues&questions:
- TabLayoutPanel has no default style and the given styles differ from
the TabPanel styles. Is it planned to add more substyles?
- TabLayoutPanel is working fine on Chrome and Firefox but on IE8
(didn't try other IE's) it is completely broken
- Is an equivalent to DecoratedTabLayoutPanel planned?
- Is there a simple way to let both widgets of a SplitLayoutPanel take
up 50% of the given space?

Daniel

[John Tamplin]

On Sun, Jan 3, 2010 at 5:56 AM, dflorey <daniel...@gmail.com> wrote:

- TabLayoutPanel is working fine on Chrome and Firefox but on IE8
(didn't try other IE's) it is completely broken

Are you in standards mode?  Quirks mode is not supported with the new layout panels on IE.

--
John A. Tamplin
Software Engineer (GWT), Google

[dflorey]

Yes. You can have a look at my current testpage at
http://www.floreysoft.net
It's just a bunch of new LayoutPanel with css styles only.

On Jan 3, 6:30 pm, John Tamplin <j...@google.com> wrote:

[Joel Webber]

I assume we're talking about the TabLayoutPanel issue, where the individual tabs are expanding to full width, and stacking up vertically. This appears to be happening in both IE8 and IE7 modes.

This doesn't seem to happen normally -- the code in TabLayoutPanel uses float:left to cause the tabs to stack up horizontally. This style property seems to be intact in your app, so something else must be interfering with it. Would you mind looking at it to see if perhaps there's another property that might be confusing IE? If we can figure out what it is, there may be a way to prevent it in the future.

--
http://groups.google.com/group/Google-Web-Toolkit-Contributors

[dflorey]

Very strange. I've added float:left to each tab explicitly and now it
is working.
I guess it may be useful to provide a working default style.
If you are interested I can post my funky rounded-border animated
webkit/firefox style ;-)

[Joel Webber]

Which element did you have to add float:left to? It's set manually in code to the outermost tab element, which is all that *should* be necessary.

--

http://groups.google.com/group/Google-Web-Toolkit-Contributors

[Alejandro D. Garin]

On Mon, Jan 4, 2010 at 2:01 PM, Joel Webber <j...@google.com> wrote:

Which element did you have to add float:left to? It's set manually in code to the outermost tab element, which is all that *should* be necessary.

Hi,

I ran into the same issue with IE7/8 using the css example you suggested here:

http://groups.google.com/group/google-web-toolkit-contributors/browse_thread/thread/e9d6b9d7ad02b66f

but adding float:left to:

.gwt-TabLayoutPanelTab {
  background: url(tab-inactive-left.png) no-repeat bottom left;
  float:left;
}

solves the problem.

Alejandro.

[Joel Webber]

Thanks, Alejandro. I'll reproduce this locally and enter an issue for it. It sounds like the issue might have something to do with having a block-level element *inside* the tabs two existing divs. float:left on just the outer-most element is supposed to work here, but perhaps that's not enough on IE.

--

http://groups.google.com/group/Google-Web-Toolkit-Contributors

[Alejandro D. Garin]

Joel, I think that the problem could be setting 'cssFloat' property on IE using javascript.
I made a little test changing this line on TabLayoutPanel.java:111

      getElement().getStyle().setProperty("cssFloat", "left");
to
      getElement().getStyle().setProperty("styleFloat", "left");

Obviously this works on IE but not on the rest.

--
http://groups.google.com/group/Google-Web-Toolkit-Contributors

[Joel Webber]

I just realized I failed to answer a couple of these questions...

On Sun, Jan 3, 2010 at 5:56 AM, dflorey <daniel...@gmail.com> wrote:

- TabLayoutPanel has no default style and the given styles differ from
the TabPanel styles. Is it planned to add more substyles?

I added the bare minimum styles to get it working, but I anticipate that a better mechanism will be needed soon. We'd like to attack the general problem of using CssResource/ClientBundle to style widgets (and create broader themes) before letting the "old style" style names get to hairy.

- Is an equivalent to DecoratedTabLayoutPanel planned?

I had something like the existing DecoratorPanel partially finished, but couldn't get it done in time for 2.0. The TabLayoutPanel itself defines two elements for each tab, which should be enough for most "sliding windows" style tricks, but without all the heavyweight mess of a full table for each tab. I've shown that you can at least duplicate Chrome's tabs (curved/angled with overlapping) using this structure.

- Is there a simple way to let both widgets of a SplitLayoutPanel take
up 50% of the given space?

Not really. The SplitLayoutPanel requires PX units because it has to move the split-point in relation to mouse events, which are always in pixels. It *might* be possible to map mouse events to arbitrary units, but I didn't try to attack this problem in the first pass, mainly because I'm afraid of weird CSS aliasing artifacts.

[Joel Webber]

Argh, it appears that you're right about that. We need to add Style.setFloat() to paper over that irritating difference. I've added issue 4447 to track this.

Thanks,

joel.

--
http://groups.google.com/group/Google-Web-Toolkit-Contributors