tab to textfield moves the component

Vaadin 6 / 7 / 8
1

I’m creating a composite component out of the standard label and textfields, panel and vertical layout and I’m having an odd behavior when I press the tab key and focus moves to my TextField. My TextField moves up a few pixels. If I just use a mouse click on the TextField, everything is fine, it just gets the focus, no movement. But using the tab key not only focus but also selects all text in the field, which is standard behavior. However, it moves up as I said and when I move out of the textfield, it remains that way. If the TextField is empty, is also OK, the problem is when there’s some text that gets selected when focused.
I’m setting several styles on the TextField from the Valo theme like no border, and also setting the height on the parent wrapper VerticalLayout to a fixed size like “4em”.

Any ideas why this happens.

2

Hi Carlos, did you try to use a absolute unit, like px? Try a fixed height and width in px, just to see if it helps understanding what’s going on.