Bootstrap Menu Skin Transparency

3 posts, 0 answers
  1. Craig Holmes
    Craig Holmes avatar
    3 posts
    Member since:
    Nov 2009

    Posted 12 Jul 2018 Link to this post

    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. Peter Milchev
    Admin
    Peter Milchev avatar
    566 posts

    Posted 17 Jul 2018 Link to this post

    Hello Craig,

    We have created a RadMenu with the Bootstrap skin and we didn't observe a transparency as demonstrated in the screenshot below: 



    <!DOCTYPE html>
     
    <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.
  3. Craig Holmes
    Craig Holmes avatar
    3 posts
    Member since:
    Nov 2009

    Posted 17 Jul 2018 in reply to Peter Milchev Link to this post

    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

Back to Top