RadMenu rounded corners

3 posts, 0 answers
  1. Daniel
    Daniel avatar
    4 posts
    Member since:
    Jan 2011

    Posted 15 May 2013 Link to this post

    Hello Community.

    The first, my Problem is hard to explain in english, for my. For that reason i made a "explain Screenshot" :) I hope this will help.

    I have a RadMenu with just one RadMenuItem where i have some Custom html.
    I need this RadMenuItem with rounded corners.

    So i tried to make 2 corner image and set it to the right location. But the RadMenu Item had somewhere a padding or a margin at the bottom. There are always about 4 pixel too much at the bottom.

    For a better understanding i have this Screenshot: explain.png

    Here is my code:

    <style media="all" type="text/css">
     
            div.RadMenu .rmGroup .rmText {
                margin:-5px 0 0 0;
                padding: 0 0 0 0;
            }
     
            div.RadMenu_Sitefinity ul.rmRootGroup,
            div.RadMenu_Sitefinity div.rmRootGroup
            {
                 background: none;
                 border: 0;
            }
         
             div.RadMenu_Sitefinity .rmItem .rmGroup {
     
                background-color: rgb(28, 66, 118);
                border: 0;
            }
     
    </style>

           <telerik:RadMenu runat="server" ID="rmSBRechnerUndTools" Visible="false" Skin="Sitefinity" OnClientItemOpened="itemOpened"
                Width="28" Height="139" Style="z-index: 105; right: 12px; position: fixed; top: 200px;" Flow="Vertical">
                <Items>
                     <telerik:RadMenuItem PostBack="false" ImageUrl="../img/slide-button.png" HoveredImageUrl="../img/slide-button-active.png">
                          <Items>
                               <telerik:RadMenuItem Width="322" Value="rmiSBRechnertools">
                                    <ItemTemplate>
                                         <div>
                                            <asp:Image ID="imgSbleft" runat="server" ImageUrl="../img/sbMenuRoundLeft.png" CssClass="links" />
                                            <div class="links">
                                                <div style="clear:both;height:10px;"></div>
                                                <asp:Label ID="lbSBRechnerUTools" runat="server" Text="Verfügbare Rechner und Tools" CssClass="lhswhite"></asp:Label>
                                                <div style="clear:both;height:10px;"></div>
                                                <div style="clear:both;">
                                                    <asp:ImageButton ID="ibKredit" runat="server" CssClass="links" ImageUrl="../img/sb_kr.png" onmouseover="this.src='../img/sb_kr_ov.png'" onmouseout="this.src='../img/sb_kr.png'" />
                                                    <asp:ImageButton ID="ibHypo" runat="server" CssClass="links" ImageUrl="../img/sb_hr.png" onmouseover="this.src='../img/sb_hr_ov.png'" onmouseout="this.src='../img/sb_hr.png'" />
                                                    <asp:ImageButton ID="ibTilgung" runat="server" CssClass="links" ImageUrl="../img/sb_ta.png" onmouseover="this.src='../img/sb_ta_ov.png'" onmouseout="this.src='../img/sb_ta.png'" />
                                                    <asp:ImageButton ID="ibUnterjährig" runat="server" CssClass="links" ImageUrl="../img/sb_uvz.png" onmouseover="this.src='../img/sb_uvz_ov.png'" onmouseout="this.src='../img/sb_uvz.png'" />
                                                </div>
                                                <div style="clear:both;">
                                                    <asp:ImageButton ID="ibImmobilien" runat="server" CssClass="links" ImageUrl="../img/sb_immo.png" onmouseover="this.src='../img/sb_immo_ov.png'" onmouseout="this.src='../img/sb_immo.png'" />
                                                    <asp:ImageButton ID="ibKaufenMieten" runat="server" CssClass="links" ImageUrl="../img/sb_km.png" onmouseover="this.src='../img/sb_km_ov.png'" onmouseout="this.src='../img/sb_km.png'" />
                                                    <asp:ImageButton ID="ibBankensuche" runat="server" CssClass="links" ImageUrl="../img/sb_ba.png" onmouseover="this.src='../img/sb_ba_ov.png'" onmouseout="this.src='../img/sb_ba.png'" />
                                                    <asp:ImageButton ID="ibGrundGew" runat="server" CssClass="links" ImageUrl="../img/sb_gws.png" onmouseover="this.src='../img/sb_gws_ov.png'" onmouseout="this.src='../img/sb_gws.png'" />
                                                </div>
                                                <div style="clear:both;height:6px;"></div>
                                            </div>
                                            <asp:Image ID="imgSbRight" runat="server" ImageUrl="../img/sbMenuRoundRight.png" CssClass="links" style="right:0px;" />
                                         </div>
                                    </ItemTemplate>
                               </telerik:RadMenuItem>
                          </Items>
                     </telerik:RadMenuItem>
                </Items>
           </telerik:RadMenu>
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            function itemOpened(s, e) {
                if ($telerik.isIE8) {
                    // Fix an IE 8 bug that causes the list bullets to disappear (standards mode only)
                    $telerik.$("li", e.get_item().get_element())
                            .each(function () { this.style.cssText = this.style.cssText; });
                }
            }
        </script>
    </telerik:RadScriptBlock>

    I hope you understand my Problem :D
    Thanks for reading.

    Daniel
  2. Daniel
    Daniel avatar
    4 posts
    Member since:
    Jan 2011

    Posted 17 May 2013 Link to this post

    If no one can help me, can i contact the support with that kind of problem? I do have a product serial.

    Thank you,
    Daniel
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 17 May 2013 Link to this post

    Hello Daniel,

    To resolve better your problem with the four redundant pixels we need all the css that you applied. We attached an archived file with the pasted code. Could you please modify the file to be exactly as your code?

    Regards,
    Magda
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top