inline Hyperlink as part of a sentence -- spacing is getting battered by IE 6

[Jeoff Wilks]

I'm trying to get a simple inline Hyperlink as part of a sentence, using the "display: inline" hack. In Firefox I get what I expect: You may view Item 1 now if you like. But IE 6 swallows the space after the hyperlink (note the lack of any space between "1" and "now"): You may view Item 1now if you like. Any ideas how to deal with this spacing problem? I suspect the problem is that where normally you'd want this markup (a dom Text node followed by an Anchor node, followed by a Text node):

<div>You may <a href="...">view Item 1</a> now if you like.</div>

GWT instead renders the InlineHTML as spans, rather than plain dom Text nodes:

<div><span>You may </span><div style="display:inline"><a href="...">view Item 1</a></div><span> now if you like.</span></div>

IE 6 apparently truncates the spaces at the start of a <span> element. But I don't know of a way to add a GWT widget to a panel without wrapping it in some kind of html element.

The actual code looks like: Hyperlink link = new Hyperlink("view Item 1","item1"); FlowPanel fp = new FlowPanel(); fp.add(new InlineHTML("You may "); fp.add(link); fp.add(new InlineHTML(" now if you like.")); And the supporting CSS:

.gwt-Hyperlink { display: inline; }

---

Related Tickets/Posts:

http://code.google.com/p/google-web-toolkit/issues/detail?id=2901

http://code.google.com/p/google-web-toolkit/issues/detail?id=3056

http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/7d03bc354e3016c8/f880e270366ba643?q=inline+hyperlink+inlinehtml#f880e270366ba643

http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/953262516e9d664b/914bd958e23094ee

[mars1412]

a non-breaking space might work: &nbsp;

On Apr 16, 3:51 pm, Jeoff Wilks <jeoffwi...@gmail.com> wrote:
> I'm trying to get a simple inline Hyperlink as part of a sentence, using the
> "display: inline" hack. In Firefox I get what I expect: You may view

> Item 1now if you like. But IE 6 swallows the space after the hyperlink

> (note the
> lack of any space between "1" and "now"): You may view Item 1now if you
> like. Any ideas how to deal with this spacing problem? I suspect the problem
> is that where normally you'd want this markup (a dom Text node followed by
> an Anchor node, followed by a Text node):<div>You may <a href="...">view
> Item 1</a> now if you like.</div>
>
> GWT instead renders the InlineHTML as spans, rather than plain dom Text
> nodes:
> <div><span>You may </span><div style="display:inline"><a href="...">view
> Item 1</a></div><span> now if you like.</span></div>
>
> IE 6 apparently truncates the spaces at the start of a <span> element. But I
> don't know of a way to add a GWT widget to a panel without wrapping it in
> some kind of html element.
>
> The actual code looks like: Hyperlink link = new Hyperlink("view Item
> 1","item1"); FlowPanel fp = new FlowPanel(); fp.add(new InlineHTML("You may
> "); fp.add(link); fp.add(new InlineHTML(" now if you like.")); And the
> supporting CSS: .gwt-Hyperlink { display: inline; }
>
> ---

> Related Tickets/Posts:http://code.google.com/p/google-web-toolkit/issues/detail?id=2901http://code.google.com/p/google-web-toolkit/issues/detail?id=3056http://groups.google.com/group/Google-Web-Toolkit/browse_thread/threa...http://groups.google.com/group/Google-Web-Toolkit/browse_thread/threa...

[Thomas Broyer]

On 16 avr, 15:51, Jeoff Wilks <jeoffwi...@gmail.com> wrote:
> I'm trying to get a simple inline Hyperlink as part of a sentence, using the
> "display: inline" hack. In Firefox I get what I expect: You may view

> Item 1now if you like. But IE 6 swallows the space after the hyperlink

> (note the
> lack of any space between "1" and "now"): You may view Item 1now if you
> like. Any ideas how to deal with this spacing problem? I suspect the problem
> is that where normally you'd want this markup (a dom Text node followed by
> an Anchor node, followed by a Text node):<div>You may <a href="...">view
> Item 1</a> now if you like.</div>
>
> GWT instead renders the InlineHTML as spans, rather than plain dom Text
> nodes:
> <div><span>You may </span><div style="display:inline"><a href="...">view
> Item 1</a></div><span> now if you like.</span></div>
>
> IE 6 apparently truncates the spaces at the start of a <span> element. But I
> don't know of a way to add a GWT widget to a panel without wrapping it in
> some kind of html element.
>
> The actual code looks like: Hyperlink link = new Hyperlink("view Item
> 1","item1"); FlowPanel fp = new FlowPanel(); fp.add(new InlineHTML("You may
> "); fp.add(link); fp.add(new InlineHTML(" now if you like.")); And the
> supporting CSS: .gwt-Hyperlink { display: inline; }

Are you using GWT 1.6 ? If so, use an InlineHyperlink instead. If not,
use a no-break space, or try playing with padding/margin of the
Hyperlink...
(you might try using an InlineLabel instead of InlineHTML too)

As a last resort: add your Hyperlink to the FlowPanel and create text
nodes that you'll add at the DOM level (FlowPanel.getElement().insert)

[Jeoff Wilks]

Good idea. I just tried InlineHyperlink but it has the same problem. Looking at the 1.6 source code I see no behavioral differences in InlineHyperlink, other than a different primary style name (which probably defaults the style to display: inline).

[Jeoff Wilks]

The non-breaking space hack (&nbsp;) does work....

With the DOM wrappers introduced in gwt 1.5 and the simplified event-handling system added in 1.6 --- maybe it's time to think differently about when a Widget is appropriate.

Panel p = new PanelThatCanHandleBothWidgetsAndDOMNodes();

p.add(Document.get().createTextNode("here is a "));

p.add(new InlineHyperlink("link","item1"));

p.add(Document.get().createTextNode(" for you."));

[Thomas Broyer]

On 16 avr, 18:58, Jeoff Wilks <jeoffwi...@gmail.com> wrote:
> Good idea. I just tried InlineHyperlink but it has the same problem. Looking
> at the 1.6 source code I see no behavioral differences in InlineHyperlink,
> other than a different primary style name (which probably defaults the style
> to display: inline).

The key is actually the super(null) call which, in Hyperlink, will use
the anchor (<a>) as the widget's element instead of wrapping it in a
<div> (standard Hyperlink behavior). There's no "default style" for
widgets (except if you use one of the provided themes, I personnaly
don't).

[Jeoff Wilks]

Very true; when I use InlineHyperlink it does render without a div:

<span class="gwt-InlineHTML">You may </span><a href="#item1" class="gwt-InlineHyperlink">Item 1</a><span class="gwt-InlineHTML"> now if you like.</span>

That markup, when placed alone in a test page along with my stylesheets, does show the proper spacing even in IE6. So I'm at a loss to explain why the space between the link and the trailing span is collapsed when I render it inside my gwt widget.

In any case, it's not a pressing matter as I've found a workaround (combine a non-breaking space to force spacing, plus a regular space to allow wrapping). Thanks for your help, I very much appreciate it.