RadMenu Float Image Right Not Working

17 posts, 0 answers
  1. Jason Horspool
    Jason Horspool avatar
    10 posts
    Member since:
    Oct 2006

    Posted 16 Mar 2011 Link to this post

    We are using the WebBrowser control that ships with Visual Studio and have modified the CSS style with the following to get the image to appear to the right of our menu item:

    .rmLeftImage

    {

     

     

    float: right !important;
    }

     


    This causes the menu items to stretch the width of the menu and wrap the remaining menu items below each other?
    These RadMenuItems have nested RadMenuItems (for a flyout menu) but not sure if that is the culprit?
    Any ideas?

     

     

     

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 17 Mar 2011 Link to this post

    Hello Jason,

    Try the following CSS.
    CSS:
    .RadMenu .rmLeftImage
            {
                float: right !important;
                position: fixed !important;
            }

    Thanks,
    Shinu.
  3. Jason Horspool
    Jason Horspool avatar
    10 posts
    Member since:
    Oct 2006

    Posted 17 Mar 2011 Link to this post

    The problem with that is if the page scrolls, the image stays in fixed position so it doesn't scroll with the page?  How did you guys style your menu on your website?  We are looking for something similar.
  4. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 18 Mar 2011 Link to this post

    Hello Jason,

    You can set the position as absolute instead of fixed
    CSS:
    .RadMenu .rmLeftImage
          {
              float: right !important;
              position:absolute !important;
          }

    Regarding your second question, refer the following KB article which gives a stand-alone demo of the Telerik web site navigation.
    Telerik web site RadMenu navigation

    Thanks,
    Shinu.
  5. TSM
    TSM avatar
    38 posts
    Member since:
    Jun 2010

    Posted 18 May 2011 Link to this post

    Hi All,
               Can anyone help me regarding the same issue.My problem is that the above css works for  me only in IE and Firefox.
               For Opera,Chrome and Safari this doesnt works fine(Image not right aligning and attaching to the text itself).If i         remove position:absolute !important  it works fine.But i need the same css mentioned by Shinu as i have viewing
               problem in IE7(Problem mentioned by Jason Horspool).Here operamenuproblem.png image is the problem   i  have in Opera,Chrome and Safari and ieradmenuimage.png is the one which works fine for me In IE8.I have tried some other ways using padding,margin etc,but of no use. Please help me out?
  6. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 23 May 2011 Link to this post

    Hello Titti,

    I tested the issue that you show on the image but I can not get the same appearance as you do. Can you plase clarify which skin of the menu you are using as well as the exact version of the controls? Did you try this css file selector.
    .RadMenu .rmLeftImage {
        margin: 3px 12px 0 -6px !important;
        padding-right: 10px !important;
    }
     In case it does not help I will need either a live url or a sample running project demostrating the issue so I can help you out

    Best wishes,
    Kate
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  7. TSM
    TSM avatar
    38 posts
    Member since:
    Jun 2010

    Posted 24 May 2011 Link to this post

    Hi Kate,
                   Thanks for ur kind reply..Let me explain my problem briefly...Im trying to bring the image of my RadMenu(mSubject) to right..For that i have used the below css which i got from one of your forums..

    #rmSubject .rmLeftImage
    {
      float: right !important;
      position:relative !important;
      }

    While using this css i had problem viewing in IE7.
    This causes the menu items to stretch the width of the menu and wrap the remaining menu items below each other as told by Jason Horspool.I got another workaround to solve this by using   position:absolute !important;But this causes
    problem in other browsers which works fine earlier...So how can i make it possible to work for all browsers.Also i dont want my RadMenu child items images to go right...Plese help me...
  8. TSM
    TSM avatar
    38 posts
    Member since:
    Jun 2010

    Posted 24 May 2011 Link to this post

    Hi,
         Please view the attached image RadMenu.png.I want to achieve the same just like the windows folder path
         using RadMenu...Im using an arrow image and i want this image to be at right side always.On mouse over
         RadMenu child items are shown and this should have the default behaviour of RadMenu with image left.
         Im using RadControls for ASP.NET AJAX Q2 2010.2.929.35.Also i want it to work for all themes of RadMenu and
        in all browser.Please help me.Expecting a quick reply..

    Regards And Thanks,
    Titti Skaria.
  9. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 24 May 2011 Link to this post

    Hello Titti,

    Please take a look at the following documentation. Hope it might helps.
    Showing the Path to an Item

    Thanks,
    Princy.
  10. TSM
    TSM avatar
    38 posts
    Member since:
    Jun 2010

    Posted 25 May 2011 Link to this post

    Hi Princy,
                     Thanks for ur reply...My need is i want to use RadMenu just like the radmennu.png i have attached.
                     So can u tell  me how to move my image of parent menu to right and not the child menu items..

                    #rmSubject .rmLeftImage
                   {
                     float: right !important;
                     position:absolute !important;
                   }

                The above css works for me,but has problem viewing in different browsers and also it makes child
                menu item  images to the right also..My simple need is to right align only the RadMenu Parent images
               which should work in all browsers...

    Thanks And Regards,
    Titti Skaria.
                     
  11. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 25 May 2011 Link to this post

    Hi Titti,

    One way I would suggest is to simply put an image that contains the text and the arrow of the MenuRootItem (as in this demo). Another approach whose end effect would be the same is to use a RadToolBar control instead of the RadMenu.

    Kind regards,
    Kate
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  12. TSM
    TSM avatar
    38 posts
    Member since:
    Jun 2010

    Posted 25 May 2011 Link to this post

    Hi Kate,
                  Thanks for your suggestion..So proper image right aligning is not possible for RadMenu.????...It would be helpfull
    if i can do it using RadMenu..Please take a look at the attached image...I want to change the image onmouseover
    also just like the below image.Im using ImageUrl and ExpandedImageUrl property to acheive this.It will be
    good if RadMenu has a ImagePosition property just like other RadControls.I have overrided the RadMenu
    skin to acheive this...Only problem come with image..Please help me...
  13. TSM
    TSM avatar
    38 posts
    Member since:
    Jun 2010

    Posted 28 May 2011 Link to this post

    Hi,
         No one there to help me out? My simple problem is i must use RadMenu and Its ParentItem image should be
    at right and its child item(ie.Menu which shows on Mouse over) should have default behaviour as image on
    left which should work very well on all browsers..Im looking forward to a neat solution..Please....
  14. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    651 posts

    Posted 02 Jun 2011 Link to this post

    Hi Titti,

    I apologize for the late response.

    It seems that your problem might be specific to your case. Could you set up and send us a small project that has this problem. It doesn't need to be full project, just the minimum one -- a page or two with all the related stylesheets, scripts, images and other resources.

    Also, remember NOT to include the Telerik DLL's in the project.

    With that information provided, we'll be able to quickly come up with a solution.

    Regards,
    Ivan Zhekov
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  15. TSM
    TSM avatar
    38 posts
    Member since:
    Jun 2010

    Posted 02 Jun 2011 Link to this post

    Hi Ivan Zhekov ,
                               Thanks for your kind reply...I have been waiting for a long for a solution.
    Below is my design..

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RadMenu.aspx.cs" Inherits="TittiTestApps._Default" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>RadMenu</title>
      </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <telerik:RadMenu ID="RadMenu1" runat="server">
                <Items>
                    <telerik:RadMenuItem Text="AAAAAAAAAAAAAAAAAAAAAAAAAAAAA" ImageUrl="PathRight.gif"
                        ExpandedImageUrl="PathDown.gif">
                        <Items>
                            <telerik:RadMenuItem Text="AAAAA1" ImageUrl="user16.png">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="AAAAA2" ImageUrl="user16.png">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="AAAAA3" ImageUrl="user16.png">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="BBBBBBBBBBBBBBBBBBBBBBBBBBDDDD" ImageUrl="PathRight.gif"
                        ExpandedImageUrl="PathDown.gif">
                        <Items>
                            <telerik:RadMenuItem Text="BBBBB1" ImageUrl="user16.png">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="BBBBB2" ImageUrl="user16.png">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="BBBBB3" ImageUrl="user16.png">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC" ImageUrl="PathRight.gif"
                        ExpandedImageUrl="PathDown.gif">
                        <Items>
                            <telerik:RadMenuItem Text="CCCCC1" ImageUrl="user16.png">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="CCCCC2" ImageUrl="user16.png">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="CCCCC3" ImageUrl="user16.png">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenu>
        </div>
        </form>
    </body>
    </html>

    And this is my CSS..

    #RadMenu1 .rmLeftImage  
    {
      float: right !important;
      position:absolute !important;
    }
     
    #RadMenu1 .rmRootGroup,
    #RadMenu1 a.rmLink,
    #RadMenu1 .rmText,
    #RadMenu1 .rmLeftArrow,
    #RadMenu1 .rmRightArrow,
    #RadMenu1 .rmTopArrow,
    #RadMenu1 .rmBottomArrow,
    #RadMenu1 ul.rmHorizontal .rmFirst
    {
        background-image: none !important;
        background-color: White !important;
        color:Black !important;
        text-decoration:underline !important;
        border:none !important;
        font-weight:bold !important;
        cursor:pointer !important;  
    }
     
    #RadMenu1 .rmSlide .rmLink .rmText,
    #RadMenu1 .rmSlide ul.rmHorizontal .rmFirst,
    #RadMenu1 .rmTopFix,
    #RadMenu1 .rmBottomFix,
    #RadMenu1 .rmRoundedCorners .rmGroup .rmItem,
    #RadMenu1 .rmRoundedCorners li.rmFirstGroupColumn .rmItem,
    #RadMenu1 .rmRoundedCorners .rmFirstGroupColumn li.rmFirstGroupColumn .rmItem,
    #RadMenu1 .rmGroup .rmItem,
    #RadMenu1 ul.rmHorizontal .rmFirst,
    #RadMenu1 .rmScrollWrapContainer,
    #RadMenu1 .rmGroup ul.rmGroup,
    #RadMenu1 ul.rmGroup
    {
        background-image: url('Menu/rmVSprite.png') !important;
        background-color: #f0f2f4 !important;  
        background-repeat: repeat-y !important;
        background-position: -3px 0 !important;
        text-decoration: none !important;
        padding-left:0px;
     }

    I had problem viewing in different browsers and also in different versions..Also its showing very weird
    behaviour in IE7(menu items to stretch the width of the menu and wrap the remaining menu items below each other)

    Thanks And Regards,
    Titti Skaria.


  16. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    651 posts

    Posted 08 Jun 2011 Link to this post

    Hi Titti,

    Please review the attached file. Is the demo a move in the right direction, or away from it?

    Greetings,
    Ivan Zhekov
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  17. TSM
    TSM avatar
    38 posts
    Member since:
    Jun 2010

    Posted 09 Jun 2011 Link to this post

    Hi Ivan Zhekov ,

                                  Thanks for ur reply.Atlast i have solved my problem.Thanks  a lot for ur solution.The styles provided
     in the sample solution works perfectly for all browsers which i have tested.So for image right aligning to work perfectly one should never use float : left  for rmLeftImage.It will be nice to have  ImagePosition property.
    Thanks And Regards,
       Titti Skaria.
Back to Top