<input> in MenuBar implementation

[Felix]

Hello,

A newcomer to GWT 2.1.1, I get extra lines above and below items
inside a MenuBar.

Turns out there is a text <input> between the <div> and the table with
the MenuItems:

<input type="text" tabindex="-1" style="opacity: 0; height: 1px;
width: 1px; z-index: -1; overflow-x: hidden; overflow-y: hidden;
position: absolute; ">

The <input> draws in a style definition that looks like it causes the
lines:

input:not([type]), input[type="text"], input[type="password"] {
padding: 1px 0px;
}

For the time being, I would like to find out why the <input> is there.

Could someone please point out a good place to look?

Ideas on how to get rid of the <input> are also welcome.

Sincerely,
Felix

[Thomas Broyer]

On Monday, January 31, 2011 11:17:11 AM UTC+1, Felix wrote:

Hello,

A newcomer to GWT 2.1.1, I get extra lines above and below items
inside a MenuBar.

Turns out there is a text <input> between the <div> and the table with
the MenuItems:

<input type="text" tabindex="-1" style="opacity: 0; height: 1px;
width: 1px; z-index: -1; overflow-x: hidden; overflow-y: hidden;
position: absolute; ">

Given that it's "position:absolute" it's probably not the one causing trouble here.

 

The <input> draws in a style definition that looks like it causes the
lines:

input:not([type]), input[type="text"], input[type="password"] {
    padding: 1px 0px;
}

For the time being, I would like to find out why the <input> is there.

It's there to "emulate" "focusability" in browsers that do not support tabindex=0 to make any element focusable (this was the case of WebKit and Opera for a long time, so even now that this is fixed, it's still there to support older versions).

 

Could someone please point out a good place to look?

In the DOMImplSafari and DOMImplOpera classes.

Ideas on how to get rid of the <input> are also welcome.

 

Given that it's "position:absolute" it's probably not the one causing trouble here, and removing it will make you menu non-focusable on some not-so-old browsers (Safari 4 ?)

[Jaroslav Záruba]

Unfortunately when I set the menu to position:absolute, top:0, left:0 this nasty input does cause troubles: it makes the menu stick 1px over the right edge of the page which naturally causes horizontal scroll-bar to be dran by the bottom edge of the page. (Setting the input manually to position:relative seems to fix the problem.)