Label + Link + Label

Once again, this took way too long to figure out. Inspired by http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/953262516e9d664b?hl=en, but since I can't use GWT 1.5 (yet), I came up with another way of making this work.

The whole problem (as pointed out in that discussion thread) is that a <div> is rendered with "display:block;", thus forcing newlines... The fix is to sprinkle in a style that forces "display:inline;"...

Label prefix = new Label( "prefix " );

prefix.addStyleName( "inline-label" );

Label link = new Label( "foo bar" );

link.addStyleName( "hyperlink" );

link.addStyleName( "inline-label" );

Label suffix = new Label( " suffix" );

suffix.addStyleName( "inline-link" );

Panel flow = new FlowPanel();

flow.add( prefix );

flow.add( link );

flow.add( suffix );

And in the CSS:

.hyperlink {

  color: blue;

  text-decoration: underline;

  cursor: pointer;

}

.inline-label {

  display: inline !important;

}