Vaadin 24 focus border (blue outline) is clipped on left/right — how to fix?

Flow
1

I believe this blue border is called focus ring.
image

I was trying to see if there is some tips on the styling page, but the document page has been down since I checked this morning.
https://vaadin.com/docs/latest/components/select/styling

I believe increasing the column width could fix the issue, but this table already contains 15 columns, so it’s probably not a good idea to increase the column width any further.

What are some ways to fix this so that the entire blue focus border is visible? For example, is it possible to reduce the size of the focus ring, such as adjusting the focus ring’s height or width?

2

What Vaadin version are you using?

If you’re using the Lumo theme, the focus outline is implemented with a box-shadow. The easiest way to fix this is to use the native outline property and move it inside the select, so that it’s on top of the regular border.

vaadin-select[focus-ring]::part(input-field) {
  box-shadow: none;
  outline: 2px solid var(--vaadin-focus-ring-color);
  outline-offset: -2px;
}
3

I am using vaadin24,
This works perfectly. Thanks a lot! :grin:
image