Popover Arrow Color Issue

Flow
1

Hi,
In the same view, the popover arrow appears with color when in the end position, but it does not have color when in the start position. Can anyone help me with this issue?

image

vaadin-popover-overlay::part(content) {
    width: 350px;
    height: auto;
    border-radius: 5px;
    border: 2px solid var(--main-color);
}

vaadin-popover-overlay::part(arrow) {
    border-right-color: var(--main-color);
}
2

The border-side used for the arrow depends on the direction in which the popover opens. When it opens to the left (with the arrow pointing right), border-left is used, etc.

The easiest way to color the arrow is probably to not target a specific border. Unfortunately there is no dedicated style property for the arrow color, but it uses --lumo-base-color, which you can override instead:

vaadin-popover-overlay::part(arrow) {
  --lumo-base-color: var(--main-color);
}
1 Like
3

Thanks a lot :slight_smile:. It works.