Page 1 of 1
OverlayPanel - change background (including arrow)
Posted: 18 May 2023, 21:31
by onyii5119
How could I change the background color of an OverlayPanel, including the color of the associated arrow and still maintain the border radius of the container?
Re: OverlayPanel - change background (including arrow)
Posted: 20 May 2023, 15:01
by Melloware
here you go this CSS changes it to blue whether its flipped top or bottom.
Code: Select all
.p-overlaypanel {
background: blue;
}
.p-overlaypanel.p-overlaypanel-flipped::before {
border-top-color: blue;
}
.p-overlaypanel.p-overlaypanel-flipped::after {
border-top-color: blue;
}
.p-overlaypanel.p-overlaypanel::before {
border-bottom-color: blue;
}
.p-overlaypanel.p-overlaypanel::after {
border-bottom-color: blue;
}
Re: OverlayPanel - change background (including arrow)
Posted: 22 May 2023, 14:39
by onyii5119
Thanks, Melloware.
Your solution works when the overlay is displayed below the target.
It partially works when it is displayed above the target. In this case it shows an arrow pointing downwards (correct direction) and another arrow pointing upwards. If the arrow pointing upwards could be removed, that would solve my problem.
Thanks again for taking your time to look into my issue.
Jonathan
Re: OverlayPanel - change background (including arrow)
Posted: 22 May 2023, 15:11
by Melloware
Oh you just might need to tweak my CSS a little more. I thought I had checked it in both directions and it was looking OK but there could be something i missed.
Re: OverlayPanel - change background (including arrow)
Posted: 22 May 2023, 19:14
by onyii5119
Thanks for getting back to me. I tried several options but did not get it to work exactly as it should, before I posted my last comment.
I appreciate your help.
Jonathan