Re: DockLayoutPanel as root with fixed width

[Jens]

>
>
>
>- 
> http://www.schacharena.de
>-> fixed-width, but background covers whole screen
>
>
Thats just a background image on the body tag using CSS



>- 
>- http://www.muenchen.de
>fixed-width, but a part of the "empty" area is filled with advertising
>
> In that case your RootLayoutPanel would be  +  wide and the advertisings would go into the 
DockLayoutPanel or whatever you want to use.




> DockLayoutPanel page = new DockLayoutPanel(); // or any other layout widget
>> RootLayoutPanel fixedWidthRootLayoutPanel = RootLayoutPanel.get();
>> fixedWidthRootLayoutPanel.setWidth("960px");
>>
>> fixedWidthRootLayoutPanel.getElement().getStyle().setProperty("margin","auto");
>>
>
>  In this example, "page" is created, but not connected to a surrounding 
> panel. Is there something missing?
>

Yeah the obvious RootLayoutPanel.get().add(page) is missing.


-- J.

-- 
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+unsubscr...@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/d/optout.

Re: DockLayoutPanel as root with fixed width

[Magnus]

Hi,

here are some examples:


   - http://www.schacharena.de
   -> fixed-width, but background covers whole screen
   
   - http://www.muenchen.de
   fixed-width, but a part of the "empty" area is filled with advertising

I would like to have an outer layout that covers the whole viewport with a 
fixed-width-panel inside it.

DockLayoutPanel page = new DockLayoutPanel(); // or any other layout widget
> RootLayoutPanel fixedWidthRootLayoutPanel = RootLayoutPanel.get();
> fixedWidthRootLayoutPanel.setWidth("960px");
>
> fixedWidthRootLayoutPanel.getElement().getStyle().setProperty("margin","auto");
>

 In this example, "page" is created, but not connected to a surrounding 
panel. Is there something missing?

Magnus

-- 
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+unsubscr...@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/d/optout.

Re: DockLayoutPanel as root with fixed width

[Jens]

>
> I see such sites very often: a fixed-width layout but with still some 
> content in the remaining space.
>
> So the root layout panel should cover the whole viewport.
>

I don't get it. What remaining space do you mean and why should something 
fill the whole viewport in a fixed-width layout? In a fixed-width layout 
the whole point is that your page has a defined width, which in most cases 
is 960px, and possible remaining space left and right of that 960px page is 
intentionally empty so that users don't have to scroll horizontally if they 
use a small screen, e.g. 1024x768. 

So maybe you don't mean a fixed-width layout? If you really meant it then 
your outer most container should have a fixed width, which in case of GWT 
would be the container widget you put into the RootPanel (which represents 
the  tag). In case of RootLayoutPanel it would be the RootLayoutPanel 
itself, as it puts itself into the RootPanel behind the scenes.

So you either have

FlowPanel fixedWidthPage = new FlowPanel(); // or any other widget
fixedWidthPage.setWidth("960px");
fixedWidthPage.getElement().getStyle().setProperty("margin","auto");
RootPanel.get().add(fixedWidthPage);

or

DockLayoutPanel page = new DockLayoutPanel(); // or any other layout widget
RootLayoutPanel fixedWidthRootLayoutPanel = RootLayoutPanel.get();
fixedWidthRootLayoutPanel.setWidth("960px");
fixedWidthRootLayoutPanel.getElement().getStyle().setProperty("margin","auto");



-- J.

-- 
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+unsubscr...@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/d/optout.

Re: DockLayoutPanel as root with fixed width

[Magnus]

No ideas?
I see such sites very often: a fixed-width layout but with still some 
content in the remaining space.

So the root layout panel should cover the whole viewport.

Thanks
Magnus

-- 
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+unsubscr...@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/d/optout.

Re: DockLayoutPanel as root with fixed width

[Magnus]

On Friday, April 18, 2014 2:08:29 AM UTC+2, Jens wrote:

Currently your RootLayoutPanel fills the whole screen


This is wanted, because even with the fixed-width layout I want to control 
the contents of the remaining space.
 

> and uses overflow:hidden which causes DockLayoutPanel to be hidden if it 
> is wider than the RootLayoutPanel.


In my case it does not get hidden. It's still there (blue) but without 
scrollbars.

 




I want a fixed-width layout with a RootLayoutPanel covering the whole 
screen, in order to be able to control the contents of the left/right space.

Magnus


-- 
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+unsubscr...@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/d/optout.

Re: DockLayoutPanel as root with fixed width

[Jens]

Apply width, margin:auto to the RootLayoutPanel itself. Then you can remove all 
styles from DockLayoutPanel and you should have scrollbars. Currently your 
RootLayoutPanel fills the whole screen and uses overflow:hidden which causes 
DockLayoutPanel to be hidden if it is wider than the RootLayoutPanel.

-- 
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+unsubscr...@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/d/optout.

Re: DockLayoutPanel as root with fixed width

[Magnus]

Hi,

I noticed that there are no scrollbars when the browser width gets resized 
below the fixed width of the DockLayoutPanel.

Consider this minimal example:

 public void onModuleLoad()
 {
  DockLayoutPanel p = new DockLayoutPanel (Unit.PX);
  Style s = p.getElement ().getStyle ();
  
  s.setBorderStyle (BorderStyle.SOLID);
  s.setBorderWidth (1,Unit.PX);
  s.setBorderColor ("#FF");
  s.setBackgroundColor ("#ABCDEF");
  
  s.setProperty ("width","1000px");
  s.setProperty ("marginLeft","auto");
  s.setProperty ("marginRight","auto");
  
  RootLayoutPanel.get().add(p);
 }


I also tried Window.enableScrolling (true);, but there is no scrollbar in 
Chrome.

Again, wouldn't it be better to use one Panel /e. g. ScrollPanel) to cover 
the whole viewport and add a centered DockLayoutPanel to it?

Magnus

-- 
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+unsubscr...@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/d/optout.

Re: DockLayoutPanel as root with fixed width

[Magnus]

On Wednesday, April 16, 2014 6:32:13 PM UTC+2, Jens wrote:
>
> Or you just disable the log window so you don't have anything to hide :) 
>>
>
Ok! :-)
I can verify that it will still work if needed (shown), so this disabling 
the popup handler seems to affect only the initial state.

Magnus

-- 
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+unsubscr...@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/d/optout.

Re: DockLayoutPanel as root with fixed width

[Jens]

>
> Or do I always need a panel that covers the whole screen, in order to hide 
> unwanted things like the log window?
>

Or you just disable the log window so you don't have anything to hide :) 




-- J.

-- 
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+unsubscr...@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/d/optout.

Re: DockLayoutPanel as root with fixed width

[Magnus]

On Wednesday, April 16, 2014 11:33:02 AM UTC+2, Juan Pablo Gardella wrote:
>
> Are you using RootLayoutPanel on top of it? See 
> http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html#LayoutPanels
>
>
Yes, I add my DockLayoutPanel like this:

  RootLayoutPanel.get().add(d);
 
But how can this help me?

Or do I always need a panel that covers the whole screen, in order to hide 
unwanted things like the log window?

Thanks
Magnus 

-- 
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+unsubscr...@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/d/optout.

Re: DockLayoutPanel as root with fixed width

[Juan Pablo Gardella]

Are you using RootLayoutPanel on top of it? See
http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html#LayoutPanels


2014-04-16 0:09 GMT-03:00 Magnus :

> Hi,
>
> the panel can be centered using a left/right margin with "auto".
> Then, the DockLayoutPanel is centered, but then there are unwanted things
> appearing at the edge, e. g. a logging popup window:
>
>
> 
> I see that the DockLayoutPanel is located inside the body element, but it
> is not the body element itself. The body element has a width of the screen
> (1920px), but a height of 0, even if I set it manually to 100% in chrome
> inspector:
>
>
> 
> Why doesn't the body element cover the whole screen?
> I would like to avoid adding an intermediate panel to cover the whole
> screen.
> How should this be done?
>
> Thanks
> Magnus
>
> --
> 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+unsubscr...@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/d/optout.
>

-- 
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+unsubscr...@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/d/optout.

Re: DockLayoutPanel as root with fixed width

[Magnus]

Hi,

the panel can be centered using a left/right margin with "auto".
Then, the DockLayoutPanel is centered, but then there are unwanted things 
appearing at the edge, e. g. a logging popup window:


I see that the DockLayoutPanel is located inside the body element, but it 
is not the body element itself. The body element has a width of the screen 
(1920px), but a height of 0, even if I set it manually to 100% in chrome 
inspector:


Why doesn't the body element cover the whole screen?
I would like to avoid adding an intermediate panel to cover the whole 
screen.
How should this be done?

Thanks
Magnus

-- 
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+unsubscr...@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/d/optout.