How to make Textbox inline with its caption for Horizontal layout or vertical layout – vaadin Designer ?

Good Day!

Vaadin Designer – How to make Textbox inline with its caption for Horizontal layout or vertical layout – vaadin Designer ?

  • I have created form for registration form, and i using form layout , i have difficult to change the caption to inline, First Image To the second image.

textfield1

TO

textfield2.jpg

 

  • The solutions by using two ways:
  1. Using FormLayout inside HorizontalLayout or VerticalLayout. – inside HTML.

<vaadin-horizontal-layout style-name=”viewheader” spacing responsive width-full _id=”horizontalMainLayout”>
<vaadin-form-layout size-auto>
<vaadin-text-field caption=”Title : ” style-name=”fields inline-icon” responsive _id=”txtTitle”></vaadin-text-field>
</vaadin-form-layout>

2. Second solutions is by added the style in css.

  • html

<vaadin-text-field caption=”Title : ” style-name=”fields inline-icon inline-label” responsive _id=”txtTitle”>

  • css

.v-caption-inline-label{
display: inline-block;
}

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s