Craig Holmes
Top achievements
Rank 1
Rank 1
Craig Holmes
asked on 12 Jul 2018, 01:29 PM
Hi There,
I am using the Bootstrap skin and want a 'pure' white background for the menu (and other controls).
But the skin is semi transparent. I've tried a plain hack of the css to remove the transparency settings but that seems to have little effect.
Any pointers on how to get rid of the transparency would be appreciated.
Thanks
Craig
2 Answers, 1 is accepted
0
Hello Craig,
We have created a RadMenu with the Bootstrap skin and we didn't observe a transparency as demonstrated in the screenshot below:
What I can suggest is inspecting the transparent element and check the applied styles as explained in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post.
Once you find the styles that need to be overridden, you can use the same selector and just add "html body " in front of it, to make the new selector more specific, "stronger". More on CSS Specificity can be found here:
Regards,
Peter Milchev
Progress Telerik
We have created a RadMenu with the Bootstrap skin and we didn't observe a transparency as demonstrated in the screenshot below:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><body> <form id="form1" style="background-color:palevioletred; height:1000px" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" Skin="Bootstrap" runat="server" EnableRoundedCorners="true" EnableShadows="true"> <Items> <telerik:RadMenuItem Text="About us"> <Items> <telerik:RadMenuItem Text="Mission Statement" /> <telerik:RadMenuItem Text="Strategic Plan" /> <telerik:RadMenuItem Text="Executive Bios" /> <telerik:RadMenuItem Text="Contact Us" /> </Items> </telerik:RadMenuItem> <telerik:RadMenuItem Text="Products"> <GroupSettings ExpandDirection="Up" /> <Items> <telerik:RadMenuItem Text="Automotive" /> <telerik:RadMenuItem Text="Machinery" /> <telerik:RadMenuItem Text="Software" /> <telerik:RadMenuItem Text="Customer Goods" /> </Items> </telerik:RadMenuItem> <telerik:RadMenuItem Text="Contact Us"> <GroupSettings ExpandDirection="Right" /> <Items> <telerik:RadMenuItem Text="Europe" /> <telerik:RadMenuItem Text="Asia" /> <telerik:RadMenuItem Text="America" /> </Items> </telerik:RadMenuItem> </Items> </telerik:RadMenu> </form></body></html>What I can suggest is inspecting the transparent element and check the applied styles as explained in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post.
Once you find the styles that need to be overridden, you can use the same selector and just add "html body " in front of it, to make the new selector more specific, "stronger". More on CSS Specificity can be found here:
Regards,
Peter Milchev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Craig Holmes
Top achievements
Rank 1
Rank 1
answered on 17 Jul 2018, 09:29 AM
Hi There,
My sincere apologies, I should've checked the code. It is a RadToolBar being used as a menu rather than the RadMenu.
As you can see from the image attached, the transparency occurs in the RadToolbar and the Radgrid.
I will try debugging the CSS again.
Thanks
Craig