OverlayPanel - change background (including arrow)

UI Components for React
Post Reply
onyii5119
Posts: 112
Joined: 25 Nov 2009, 00:22

18 May 2023, 21:31

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?
Jonathan Ekwempu
TobiSoft Inc.

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

20 May 2023, 15:01

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;
}
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

onyii5119
Posts: 112
Joined: 25 Nov 2009, 00:22

22 May 2023, 14:39

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
Jonathan Ekwempu
TobiSoft Inc.

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

22 May 2023, 15:11

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.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

onyii5119
Posts: 112
Joined: 25 Nov 2009, 00:22

22 May 2023, 19:14

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
Jonathan Ekwempu
TobiSoft Inc.

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: AustinduG and 3 guests