Can't click anywhere on a TextField to put focus on it


I am currently working on my second project based on Vaadin 7.3.8 and today I have noticed a strange behaviour when putting focus on a TextField.

I can click on a TextField only to a certain point (marked as a red line in the picture in attachment). When I click on the same field beyond that point, the next component is focused (“Save” button on picture). Also the cursor changes to an arrow.

That TextField was created with the following code:

TextField functionCall = new TextField("Function call"); functionCall.setWidth("375px"); I’m using the Dark Valo preset for Valo theme if that matters.

Could you please help me with that issue? I’ve been searching the forums but I didn’t see this issue come up yet.

Thanks for the awesome framework!


Could you post more code, especially how you create the layout?

Thank you for the reply!

The following snippets represent all code dealing with that text field:

Parent components:

HorizontalLayout editEventLayout = new HorizontalLayout(); editEventLayout.setWidth("100%"); editEventLayout.setSpacing(true); editEventLayout.setMargin(true); TextField is contained in component editEventLayout, which is set as the content of the window. Window is created as a subclass of the Window class.

Alignment setup:

editEventLayout.setComponentAlignment(addEvent, Alignment.BOTTOM_RIGHT); “Save” button also has alignment set, other two components (ComboBox and TextField) don’t have.

Window setup:

center(); setResizable(false); setModal(true); setWidth("800px") If you need any further information, I’ll be happy to help!

I just checked the other TextFields in my application, all the other TextFields work as expected, except the TextField in a similar Window. It’s basically the same situation.

So your TextField overflows the slot of the layout.
To correct this set expand ratio for the TextField slot:
editEventLayout.setExpandRatio(functionCall, 1);

Then adjust the paddings the way you want or set the TextField width to 100% and adjust the spacing in css.

That solved the problem, thanks!