CODEWITHSUNDEEP
cssvaadinvaadin-flowvaadin24
Vaadin Newbie
Vaadin Newbie

Reputation: 13

How to remove space between label and text field in vaadin

I'm new to Vaadin (24) and trying to minimize the space to the right of a label next to a Text field. When I bring the page up and inspect the label and remove/uncheck the width element in chrome it looks fine. Therefore, that tells me I need to override this label similar to a bootstrap component.

This is what I see in chrome...

  #label {
    width: var(--vaadin-form-item-label-width, 8em);
    flex: 0 0 auto;
   }

Here is what I have in my MainView.java file.

  VerticalLayout verticalLayout = new VerticalLayout();
  FormLayout formLayout = new FormLayout();
  TextField firstNameTF = new TextField();
  formLayout.addFormItem(firstNameTF, "First name");
  firstNameTF.setThemeName("label-padding");
  verticalLayout.add(formLayout);

I came across an article that adds this to the CSS but its not working.

 :host([theme~="label-padding"]) [part="label"] {
   padding-right: 0px;
   }

I added the above css to styles.css because that file works fine for other items but not for this.

Then I created vaadin-text-field-styles.css and added this annotation to MainView.

 @CssImport(value = "frontend/themes/my-theme/vaadin-text-field-styles.css", themeFor = "vaadin-    text-field")

When I try to import this file it's not found but it is defintly in frontend/themes/my-theme. I also tried it at the root of frontend.

 @CssImport(value = "./vaadin-text-field-styles.css", themeFor = "vaadin-text-field")

I'm using eclipse. What am I missing? Any help will be appreciated.

Upvotes: 0

Views: 345

Answers (1)

Tatu Lund
Tatu Lund

Reputation: 10643

Your styles are not working as when wrapped in FormItem, the label is not used from TextField but a separate label in FormItem itself. This is to achieve label to be on the left side of the field as the builtin label in TextField is always on top. Furthermore FormLayout with FormItems forms a "grid" like layout with fields and labels, i.e. fields are aligned etc. So the gap there is very much on purpose. If you do not like the gap, then you should not use FormItem wrapping, and possibly the FormLayout as well.

Alternative approach could be to use just a Div component to wrap NativeLabel component and TextField to achieve less constrained design.

Upvotes: 0

Related Questions