Re: Style problems with Firefox+LayoutPanel

Thank you very much Steve for your reply.  

And sorry every body for my first empty reply

Your explanations and your 2 examples Steve are clear for me :

To fix my problem :

either I add some size precisions

or I add an intermediate FlowPanel Between LayoutPanels and Widgets

Anyway, I am disappointing by the fact that the 'new' GWT-containers (LayoutPanels and co)

behaves so differently on FF and on Chrome+Safari... 

Thank you again Steve. 

Vincent.  

Le mardi 24 septembre 2013 00:08:20 UTC+2, Steve C a écrit :

Actually, I saw essentially the same view in Chrome, at least regarding the height of the select. The width is a different story.

In general, I wouldn't add individual widgets to the root layout panel, I'd add panels, and put the widgets inside them.  That helps get around some of the browser idiosyncrasies, particularly with select tags. It looks like the RootLayoutPanel adds a div wrapper around any widget you add to it, and actually applies the sizing to that. The widget you added is then set to have top, bottom, left, and right all at 0 within that div. FF seems to ignore absolute positioning using right: XX; with select tags, but if I explicitly set the style to change the right: 0; to width: 100%;, I get the expected width.

You're getting a weird behavior with the height of the select because you didn't set any vertical sizing parameters for it when you added it, so it's defaulting to top and bottom of 0.  Thus the selector part of it is huge. (And FF does honor the bottom: 0; setting.)

Here's a revision of your code with a comparison of adding a container:

public void onModuleLoad() {
    ListBox list = new ListBox(false);
    RootLayoutPanel.get().add(list);

    RootLayoutPanel.get().setWidgetTopHeight(list, 0, Unit.PCT, 50, Unit.PCT);

    RootLayoutPanel.get().setWidgetLeftWidth(list, 0, Unit.PCT, 50, Unit.PCT);
    list.getElement().getStyle().setWidth(100, Unit.PCT);  // closer to what you want

    for (int i = 0; i < 100; i++) {
        list.addItem("item " + i);
    }
   
    ListBox list2 = new ListBox(false);
    FlowPanel pnl = new FlowPanel();
    pnl.add(list2);
    RootLayoutPanel.get().add(pnl);
    pnl.getElement().getStyle().setBorderStyle(BorderStyle.SOLID);
    pnl.getElement().getStyle().setBorderColor("black");
    pnl.getElement().getStyle().setBorderWidth(1, Unit.PX);
    list2.getElement().getStyle().setWidth(100, Unit.PCT);
    RootLayoutPanel.get().setWidgetRightWidth(pnl, 0, Unit.PCT, 50,
            Unit.PCT);
    for (int i = 0; i < 100; i++) {
        list2.addItem("item " + i);

    }
}

I don't think that there's any relation between this and issues you might be having with Canvas.


On Monday, September 16, 2013 8:29:10 AM UTC-4, vincent vigon wrote:

ListBox has a weird behavior with fireFox (23.0.1), not with Chrome and Safari. 

Here is my code :

public void onModuleLoad(){

ListBox list= new ListBox(false);

RootLayoutPanel.get().add(list);

RootLayoutPanel.get().setWidgetLeftWidth(list,0,Unit.PCT,50,Unit.PCT);

for (int i=0;i<100;i++){

list.addItem("item "+i);

}

}

The result is weird with FireFox : the list does not occupy 50% of the width, but it occupies 100% of the height.

It seems that the Layout Mechanism does not work on Firefox.

It is probably a problem with Css because I have a second problem (probably linked) : on firefox, all my drawing on canvas are black (no colors). 

Thank you for helping me

Vincent

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.