How to change background color and font color in SfPivotView tool bar dropdown list?

Hi Nelson,

We believe that your requirement is to apply custom styles to the dropdown menu of the toolbar items. If so, please refer the below code example to apply custom styles to the dropdown menu of the toolbar items.

Code Example:

Output screenshot:

Meanwhile, we have prepared a sample for your reference. Please find it from the below attachment.

Regards,

Angelin Faith Sheeba.

Good Day  AngelinFaithSheeba PaulvannanRajadurai,

thanks for the quick reply.. how to change font letter color in toolbar menu?, toolbar menu item hover still color green what is the solution?

Thanks

Nelson

Hi Nelson,

We have checked the reported issue at our end and the hovering styles applied properly at our end. Also, we have shared the code example to apply font-family along with the background color to the toolbar dropdown items. Moreover, we suspect that the reported issue may occur due to your custom CSS applied in your application. So, we request that you check the custom CSS that you applied to resolve the reported issue at your end.

Code Example:

Output screenshot:

Meanwhile, we have prepared a sample for your reference. Please find it from the below attachment.

However, If the problem persists, please reproduce it in the provided sample and revert to us (or) send your runnable sample with the data source that reproduces the problem. This would allow us to investigate the reported problem at our end and provide a solution as soon as possible.

Regards,

Angelin Faith Sheeba.

Good Day  AngelinFaithSheeba PaulvannanRajadurai,

Thanks for quick reply. i'll think the problem is in my main css file but overall my other razor pages menu and font text color is ok.. the problem is only in pivot toolbar menu.. thats why i create css style only in pivot razor page.. i'll share my css file for reference because i dont know how to solve it..

Thanks and Best Regards

Nelson

Hi Nelson,

We have reviewed the provided CSS and found no pivot table toolbar related style customization available in the provided file. Consequently, we examined the pivot table by integrating the toolbar dropdown styles customization that we provided in our previous response into your CSS file and found that the toolbar styles customization applied properly on our end. Please find the screenshot below for your reference. To illustrate this, we have prepared a sample incorporating the provided CSS, where the customization was successfully applied. Please find the sample attached below.

Output screenshot:

However, we suspect that the reported issue may arise due to the order of CSS files reference in your application end. So, we suggest that you verify the page (for example, _Layout.cshtml) where the CSS files were referred in your application, change their reference order, and then check if the problem is resolved. However, If the problem persists, please share a simple application that reproduces the reported problem in a runnable condition, as this issue only happens on your application's end. It would allow us to analyze the reported problem on our end and give a solution as quickly as feasible.

Regards,

Angelin Faith Sheeba.

Good Day  AngelinFaithSheeba PaulvannanRajadurai,

Thanks for quick reply..

Nelson

Hi Nelson,

Thanks for the update. Please contact us if you have any other queries. We are always happy to assist you.

Regards,

Angelin Faith Sheeba.