RadMenu Float Image Right Not Working

[Jason Horspool]

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?

 

 

 

[Shinu]

Hello Jason,

Try the following CSS.
CSS:

.RadMenu .rmLeftImage
        {
            float: right !important;
            position: fixed !important;
        }

Thanks,
Shinu.

[Jason Horspool]

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.

[Shinu]

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.

[TSM]

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?

[Kate]

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

[TSM]

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...

[TSM]

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.

[Princy]

Hello Titti,

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

Thanks,
Princy.

[TSM]

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.
                 

[Kate]

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

[TSM]

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...

[TSM]

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....

[Ivan Zhekov]

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

[TSM]

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.

[Ivan Zhekov]

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

[TSM]

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.