Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vaadin 8.2.0 Grid - How to remove the labels from MultiSelection-Checkboxes

Update #2: It turned out that our project setup was not optimal, which is why I had to manually copy the updated VAADIN folder with the theme to another location. The problem was not caused by vaadin but our project setup.
Thank you @SteffenHarbich and the Vaadin-Devs who helped me find the source of my problem here and in the issue ticket.


I am using Vaadin Framework 8.2.0 and I have a Grid with SelectionMode.MULTI

Because of the multiselection mode an additional column appears with checkboxes to select rows, which is fine!
But: these Checkboxes also have a label with the Text Selects row number XX. This label bothers me very much and I can't find a way to remove them.

enter image description here

In the Demo from Vaadin there are no such labels, so I'm sure that it can be achieved somehow.

Hiding the labels with CSS does not help me here, because the column width stays as if there was a label.

Here is my simplified code:

Grid<MyItem> myGrid = new Grid<MyItem>(MyItem.class);

myGrid.setSelectionMode(Grid.SelectionMode.MULTI);

myGrid.getEditor().setEnabled(true);
myGrid.setColumnReorderingAllowed(true);

//all columns match membervariables of MyItem. I use setColumns in order to control which fields are shown (not all of them are)
myGrid.setColumns(GRID_COLUMNS);  

myGrid.getColumn("foo").setHidable(false).setCaption("bar");
// configure each column similarly

myGrid.getColumn("foo").setEditorComponent(new TextField());
// some more setters of editorComponents and editorBindings

// finally, set items.
// binder contains a bean that has many MyItems. binder is of type com.vaadin.data.Binder;
myGrid.setItems(binder.getBean().getMyItems());
like image 765
kscherrer Avatar asked Dec 10 '25 12:12

kscherrer


2 Answers

See the corresponding ticket on github. Problem was old theme CSS.

like image 96
Steffen Harbich Avatar answered Dec 14 '25 01:12

Steffen Harbich


Add your theme with

.v-assistive-device-only-label  label {
    font-size:0;
    width: 0px; 
}
like image 45
Thomas Oltzen Avatar answered Dec 14 '25 01:12

Thomas Oltzen



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!