How exactly HorizontalPanel layout works?

[Laker]

Seems to me that it is pretty hard to use HorizontalPanel (comparing
to VerticalPanel and DockPanel). How exactly it is implemented? By
html table or span, etc. What's the best way to control its layout?

What I want to implement is pretty simple: a navigation panel, e.g.

[Public Home] [Profile]

Each item of the navigation panel is a Hyperlink. I want the
navigation item stick on the left side ocupying minimum space without
wrapping the word. I tried different ways:

1. directly add two Hiperlink to the horizontal panel, it gives me
this:
[Public Home] [Profile]

2. set width using setCellWidth("10%") for each item, it does not
help.

3. add a dummy panel as the third element to the horizontal panel and
set its width to be 100%.
It gives me this:
[Public [Profile]
Home]

Basically, the words are wrapped. Unfortunately, there's no way to set
Hyperline text to be unwrapped (not like Label).

Please help.

[Jason Essington]

as far as your hyperlink widgets go, you could try something like:
DOM.setStyleAttribute(hyperlink.getElement(), "whitespace", "nowrap");

which is basically what Label does to prevent word wrapping.

-jason

[bch...@gmail.com]

Did you set your panel width to 100% somewhere ?

Basically, I see that the panel is just doing what you told it to do.

if it's a layout issue, usually the problem , and thus the solution ,
is in the css definitions.

[Laker]

Tried DOM.setStyleAttribute(hyperlink.getElement(), "white-space",
"nowrap");

It has no effect.

On May 23, 12:26 am, Jason Essington <jason.essing...@gmail.com>
wrote:

[davidroe]

I have a few random suggestions:

a) get a copy of Firefox and install Firebug - this will allow you to
inspect the generated HTML of the underlying page and will provide you
with a lot of help.

b) try CSS definitions instead of DOM.setStyleAttribute() - some/most
of the time, you have to use camelCase with DOM.setStyleAttribute,
whereas CSS definitions are straight-forward. otherwise, it could be
DOM.setStyleAttribute(getElement(),"white-space","nowrap") or
"whitespace" or "whiteSpace" - I don't know which.

.myHyperlink {
white-space: nowrap;
}

hyperlink.setStyleName("myHyperlink");

c) look at HorizontalPanel.setCellWidth() - you may be able to set a
final, empty, dummy cell to 100%

HTH,
/dave

[Steiner Dominik, (QX59311)]

Hi Laker,

I think that it must be related to the fact that your HorizontalPanel is embedded in your HTML so that it gets more than just the minimum space. That way the elements you add are being distributed accordingly.

Because if you just run

public class Blubber24 implements EntryPoint
{
public void onModuleLoad()
{
HorizontalPanel hp = new HorizontalPanel();
hp.setSpacing(4);
hp.add(new Hyperlink("Public Home","public"));
hp.add(new Hyperlink("Profile","profile"));
RootPanel.get().add(hp);

}
}

it will show the 2 links without word-wrapping one beside the other. But if you set hp.setWidth("100%"); the effect you have seen will take effect.

So you might check with Firebug to see why your HP gets displayed to full length.

HTH

Dominik

-----Ursprüngliche Nachricht-----
Von: Google-We...@googlegroups.com [mailto:Google-We...@googlegroups.com] Im Auftrag von davidroe
Gesendet: Mittwoch, 23. Mai 2007 07:17
An: Google Web Toolkit
Betreff: Re: How exactly HorizontalPanel layout works?

[seb2nim]

Hi

I agree with davidroe : beware of DOM.setStyleAttribute() as most of
time, equivalent to css keywords (like 'white-space' or 'background-
image') are camelCase in DOM attributes manipulation ('whiteSpace') (i
suggest you w3school website to compare : http://www.w3schools.com/htmldom/dom_obj_style.asp
for DOM and http://www.w3schools.com/css/ for css).

Thats for the nowrap thing and DOM.setStyleAttribute usage.

Then, i think you just have to align your HorizontalPanel left. Dont
event touch width or anything else, not needed.

Note that if you run (in this case, debug) your app within eclipse,
you can put breakpoints and evaluate your hp, a convenience
toString( ) method will show you what your html looks like.

For Horizontal and Vertical Panel as well, i suggest you using these
methods :
hp.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_LEFT);
hp.setCellVerticalAlignment(embededWidgetRef,
HasVerticalAlignment.ALIGN_MIDDLE);
... and their friends.

seb

[Reinier Zwitserloot]

Correction. You MUST use camelCase in DOM.setStyleAttribute. Not
'sometimes', all the time.

It's:

DOM.setStyleAttribute(something.getElement(), "whiteSpace", "no-
wrap");

note how for values you DONT use the camelcase.

Some browsers do work fine when you write white-space, but other
browsers ignore it. All browsers work fine with camelcased keys, and
this is also the official notation according to web specs. Once GWT
1.4 is out I'll see about getting a patch into GWT 1.5 that adds a
setStyleAttribute to UIObject, so that you no longer have to bother
with 'getElement()'. That patch will also autoconvert "a-bee-cee-dee"
to "aBeeCeeDee", making this issue a moot point. Until then, however,
you know what to do.

On May 23, 8:21 am, seb2nim <seb.le...@gmail.com> wrote:
> Hi
>
> I agree with davidroe : beware of DOM.setStyleAttribute() as most of
> time, equivalent to css keywords (like 'white-space' or 'background-
> image') are camelCase in DOM attributes manipulation ('whiteSpace') (i
> suggest you w3school website to compare :http://www.w3schools.com/htmldom/dom_obj_style.asp

> for DOM andhttp://www.w3schools.com/css/for css).

[Brill]

you panel is aving its width set and the cells in it will spread out
to take up the available space.

HorizontalPanel *does* work as you expect it to, so double check your
code and CSS to make sure you not inadvertantly setting a width.

Also, some components may set with on their child elements, so pay
attention to the parent of the HorizontalPanel.

- Brill Pappin