Text field grouped with a button

Flow
1

Hi I’m a beginner with Vaadin and I’m trying to use this component:

I want to use a text filed that contain a button for consulting staff…the text filed and the button are one component…it’s possible to do something like this? can u give me an example.
Thanks.

2

Hi,

you have to add the Button and TextField to a CssLayout. After that add the “LAYOUT_COMPONENT_GROUP” to your CssLayout. Its is requiered to use the ValoTheme in your project, which is activited by default if you are using version 7.3+.

If you are not on version 8.0 or above, replace “VaadinIcons.USER” with “FontAwesome.USER”

[code]
CssLayout componentGroup = new CssLayout();
componentGroup.addStyleName(ValoTheme.LAYOUT_COMPONENT_GROUP);

        TextField field = new TextField(); 
       
        Button button = new Button(VaadinIcons.USER);
        button.addStyleName(ValoTheme.BUTTON_ICON_ONLY);

        componentGroup.addComponents(field, button);

[/code]You can also take a look at the github demo project for more styling examples with Valo.

regards

Johannes

3

thanks.

But it’s possible to have a component that contain text filed and button by default ? for example a date field ! it’s a text field with a default consulting button that allows you to peek a date … i can found such component in vaadin?

4

You could create your own reusable component.

I explained how to create a custom ButtonField Component in this post:

https://vaadin.com/forum#!/thread/1281415

I hope this helps

regards

Johannes