Problem with flow panel and links

[Prashant Kalkar]

Hi,

I am trying to show the links in an flow panel.

The code is as follows:

flowpanel= new FlowPanel();
flowpanel.setWidth("184px");

HTML tag1 = new HTML("<a href='javascript:;'>LinkText1</a>");
DOM.setStyleAttribute(tag1.getElement(), "display", "inline");
DOM.setStyleAttribute(tag1.getElement(), "padding", "3px;");

HTML tag2 = new HTML("<a href='javascript:;'>LinkText2</a>");
DOM.setStyleAttribute(tag2.getElement(), "display", "inline");
DOM.setStyleAttribute(tag2.getElement(), "padding", "3px;");

HTML tag3 = new HTML("<a href='javascript:;'>LinkText3</a>");
DOM.setStyleAttribute(tag3.getElement(), "display", "inline");
DOM.setStyleAttribute(tag3.getElement(), "padding", "3px;");

flowpanel.add(tag1);
flowpanel.add(tag2);
flowpanel.add(tag3);

The problem is the flow panel is behaving like an HorizontalPanel.

The links which are out side the flowpanel width should be displayed on the next line.

Please help.       

Regards,
Prashant

[Martin Trummer]

well, that's also exactly like the HTML layout would behave:
I had to look at the generated HTML in the DOM to understand what's
going on:
If you have a div and in the div several links, which you inline, then
the links will never break: try it in a simple HTML page without any
JS-DOM magic.

I am not sure, what the best way is to make them break:
* if you add a space (or non-breaking space) at the end of you link
text, they will break:

HTML tag1 = new HTML("<a href='javascript:;'>LinkText1 </a>");

* also note that the link might break, if you add a space somewhere
in the middle of your text

HTML tag1 = new HTML("<a href='javascript:;'>Link Text1 </a>");

* you could also add a div that has one single space after each link

please let me know if this works 4 you and what you actually do about
it

I have already thought about subclassing the flowpanel, override the
add method and there:
automatically add style: display:inline and add a div with a space
after each element to make sure, that the FlowPanel always flows.

however I am not sure, if this is a good idea (if so, I think the gwt
specialists might already have done this 4 us)

On Aug 1, 2:05 pm, "Prashant Kalkar" <kalkar.prash...@gmail.com>
wrote:

[Prashant]

Hi Martin,

Thank you for your reply.

After the space after each link the flow panel start to work as
expected.

Now the links are getting placed exactly as I want them to be in the
given area (width).

Thank you for your help.

Regards,
Prashant

[Madu]

Hi Martin / everyone,

I am having a problem where all widgets get listed vertically.
My experiment is to be able to change the number of items
in a horizontal row by changing the flowpanel's width.
(Is that a good idea?) Below is my code:

FlowPanel fp = new FlowPanel();
fp.setSize("600", "1000");

for (int i = 0; i < 10; i++) {
FocusPanel focusPanel = new FocusPanel();

FlowPanel flowPanel = new FlowPanel();
focusPanel.add(flowPanel);

HTML label = new HTML("Draggable #" + i);
HTML spacer = new HTML(" ");
flowPanel.add(label);
flowPanel.add(spacer);
fp.add(focusPanel);

}

Thanks
Maduranga

[Ian Bambury]

They are just divs, so they will display like that unless you set

 

.gwt-HTML
{

    display:inline;

}

 

 

 

2008/8/15 Madu <madu...@gmail.com>

--
Ian
http://examples.roughian.com
_______________________________________

Stuff the environment - Print this email
_______________________________________