Search code examples
vaadinvaadin8vaadin-grid

How to remove caption in vaadin Grid multi-selection column

When Vaadin 8 Grid is set to be multi-selection mode using setSelectionMode(SelectionMode.MULTI), a column is added on left of the Grid with a checkbox on each row.

I am OK with this selection method, but the caption of each checkbox such as "Selects row number 2" etc. is really not necessary. Is there an easy method to remove these checkbox captions?

Solution

  • Yes, there is a caption, but it should not be visibile. It is accessibility feature. It seems that you have something wrong with theme and styles, as this label should not be rendered in viewport. So it should not be visible, it is just for screenreaders so that blind people could use the selection. See the screenshot how DOM should look like.

    enter image description here

    I change added .v-assistive-device-only-label that has all the same rules as in .v-assistive-device-only. Now, both the check square and caption are gone, leaving a empty cell to select. I'd like to learn how to make only the check square to show up but not the caption, if possible.

    You need to include label element in the css selector. As you see label is a child element of the element having .v-assistive-device-only-label class name. If you target .v-assistive-device-only-label, it the css is applied to that element and thus also the checkbox which is its child is affected too. But when you add label, the css applies only for the label which is child of .v-assistive-device-only-label

    .v-assistive-device-only-label label {
  position: absolute;
  top: -2000px;
  left: -2000px;
  width: 10px;
  owerflow: hidden;
}