Question 291661 in CSS Question posted in
Some basic documentation can be found here.

Css – Remove border from component

I want to create a search field with a combobox as prefix component so that the user can specify the entity type that he wants to search for.

To make it look nice, I want to remove the border from the combobox (and maybe from the textfield as well).

I thought that this code might do it, but unfortunately not. Result looks as shown below.

ComboBox<InformationType> informationTypes = new ComboBox<>();
informationTypes.setItems(InformationType.values());
informationTypes.addClassName(LumoUtility.Border.NONE);

enter image description here

Edit: The combobox informationTypes does not seem to be the element that owns the border. The border belongs to the div with the class vaadin-combo-box-container. And this element can not be styled according to https://vaadin.com/docs/v23/upgrading/essential-steps. So I guess the must be another way.

enter image description here

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Okay, I found a solution. Create a css file with this content:

    vaadin-combo-box::part(input-field) { border: 0; outline-width: 0; }

    vaadin-text-field::part(input-field) { border: 0; outline-width: 0; }

    ... and import the css file in your java class:

    @CssImport("./styles/search.css")

    OR use this css:

    :host([theme~="search-theme"]) [part="input-field"] { border: 0; outline-width: 0; }

    ... import the css as shown above and attach the theme to each component that should use it:

    myinput.addThemeName("search-theme");


  2. 0

    I don’t know very much about VAADIN but I suspect that the line

    informationTypes.addClassName(LumoUtility.Border.NONE);

    is not correct.

    You should use a CSS classname to add to the object, like so:

    informationTypes.addClassName("borderless");

    and the CSS for this should be like so:

    .borderless {
  border-width: 0;
}

    If you also want to remove the outline (when a user selects the search box) you can change the CSS to:

    .borderless {
  border-width: 0;
  outline-width: 0;
}
    Login or Signup to reply.
  3. 0

    Since the border that you’d like to remove is on a subcomponent within the shadow-dom of the vaadin-combo-box, you cannot edit that css via the java instance of ComboBox<InformationType> informationTypes.
    However there is another way. You can read more details here

    step 1: create a .css file where you declare no border for vaadin-combo-box-container. Make sure this css only applies to subcontainers of comboboxes that have the class addlater so all your other comboboxes in your view stay unaffected by this.

    /* borderless-combobox-container.css */

:host(.addlater) vaadin-combo-box-container {
    border: none;
}

    step 2: include this css in your view. I use @CssImport for this in Vaadin 14, however the above-linked docs mention this may have changed for vaadin 24 while still being supported. You may want to read more into that.

    // this annotation can be on your routed view, or main/base view, 
// or if you have your own component class for your custom search field, you could add it there
@CssImport(value = "./styles/components/borderless-combobox-container.css", themeFor = "vaadin-combo-box")
public class MyView extends VerticalLayout {
    ...
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search