RTL Problem in RADMenu

[hoty rah]

Dears,

I use radmenu in rtl mode.
when i move the mouse to a extensible menuitem , menu  jump to left completely in IE but it is ok in firefox.

Thanks,
Hoty

[Veselin Vasilev]

Hello hoty rah,

The online demo is working fine. What could be different in your case?

Sincerely yours,
Veselin Vasilev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Derrick]

I saw the exact same problem after upgrading to the latest version.  I had to downgrade to solve the problem.

In my testing, the problem only affected IE 8.  It rendered correctly (the same as before) in the latest version of Firefox and in IE 7.

Derrick Brundage

[Kamen Bundev]

Hi,

This issue is caused by the iframe overlay that is rendered under the submenus in order to overlay flash elements for instance. The triggered IE bug is weird and currently we couldn't find a way to fix it directly. Until we can, one workaround is to switch off the menu overlay if you don't use it, another workaround is to move the direction (dir="rtl") attribute from the body tag to the form tag.

Let me know if this works for you.

Sincerely yours,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[hoty rah]

Dear Kamen Bundev,

I switch off the menu overlay 'EnableOverlay="false"' and it's ok now.

Thanks in advance,
Hoty

[Sara]

I Cant Resolve this problem,Help me please ..
My menu jump to right in IE 7, but it work correctly in IE9 & IE 8

/* RadMenu Default skin */

.RadMenu_Green
{
    border: 0px solid #010101;
    border-bottom-width: 0;
    border-top-color: #839BB3;
    background: #839BB3 url() repeat-x top left;
    text-align: left;



}


.RadMenu_Green_rtl
{
    text-align: right;


}

.RadMenu_Green_Context
{
    background: none;
    border: 0;
}

.RadMenu_Green a
{
    text-decoration: none;
}

.RadMenu_Green .rmLink
{

    text-decoration: none;
    color: #fff;
}

.RadMenu_Green .rmLink:focus,
.RadMenu_Green .rmFocused
{
    outline: 20;
}

.RadMenu_Green .rmExpanded
{
    position: relative;
    z-index: 10000;
}

.RadMenu_Green .rmLink:hover, .RadMenu_Green .rmFocused, .RadMenu_Green .rmExpanded
{
    /*FirstMenu_Background*/
    background-color: #A4b5c5;
    color: #333;


}

.RadMenu_Green .rmLink .rmText
{
    font: normal 12px Arial, sans-serif;
    color: #FFFFFF;
    font-family: tahoma;
    min-width:180px;
}

.RadMenu_Green .rmGroup
{
    background: #fff;
}

.RadMenu_Green .rmGroup .rmLink
{
    /* text-decoration: none;
    color: #333;*/
    /* copy from another css*/
    border-style: solid;
    border-width: 0px 0;
    border-top-color: #f6f7f9;
    border-bottom-color: #dde1e4;
    width: auto;
    text-align: left;
    color: #333;
    min-width: 130px;
    font-weight: normal;
}

.RadMenu_Green_rtl .rmGroup .rmLink
{
    text-align: right;
}

.RadMenu_Green .rmGroup .rmLink:hover,
.RadMenu_Green .rmGroup .rmFocused,
.RadMenu_Green .rmGroup .rmExpanded
{
    color: red;
    /*SubMenu_backGround*/
    background: #839BB3;
}

.RadMenu_Green .rmText
{
    padding: 3px 20px 5px;
}

.RadMenu_Green .rmGroup .rmLink .rmText
{
    font-size: 11px;
    padding: 4px 37px 5px 20px;
}

.RadMenu_Green_rtl .rmGroup .rmLink .rmText
{
    padding: 4px 20px 5px 37px;
}

/* <expand arrows styling> */

.RadMenu_Green .rmGroup .rmLink .rmExpandRight
{
    background: transparent url(Menu/ArrowExpand.gif) no-repeat right -1px;

}

.RadMenu_Green .rmGroup .rmLink .rmExpandLeft
{
    background: transparent url(Menu/ArrowExpandRTL.gif) no-repeat left -1px;
}

.RadMenu_Green .rmGroup .rmLink:hover .rmExpandRight,
.RadMenu_Green .rmGroup .rmFocused .rmExpandRight,
.RadMenu_Green .rmGroup .rmExpanded .rmExpandRight
{
    background-image: url(Menu/ArrowExpandHovered.gif);
}

.RadMenu_Green .rmGroup .rmLink:hover .rmExpandLeft,
.RadMenu_Green .rmGroup .rmFocused .rmExpandLeft,
.RadMenu_Green .rmGroup .rmExpanded .rmExpandLeft
{
    background-image: url(Menu/ArrowExpandHoveredRTL.gif);
}

/* </expand arrows styling> */

.RadMenu_Green .rmHorizontal .rmItem { border-right: 0px solid #353535; padding-bottom:1px; }
.RadMenu_Green .rmHorizontal .rmLast { border-right: 0; }
/* hr top Menu*/
.RadMenu_Green .rmVertical .rmItem { border-bottom: 0px solid #353535; }
.RadMenu_Green .rmVertical .rmLast { border-bottom: 0; padding-bottom: 1px; }

.RadMenu_Green_rtl .rmHorizontal .rmItem { border-left: 0; }

.RadMenu_Green .rmRootGroup .rmGroup .rmItem,
.RadMenu_Green_Context .rmGroup .rmItem
{ border-right: 0; border-bottom: 0; padding-bottom: 0; }

.RadMenu_Green .rmGroup
{
    /*subMenu border*/
    border: 1px solid #828282;
    /*subMenu background*/
    background-color: #A4B5C5;
}

.RadMenu_Green .rmGroup .rmExpanded
{
    z-index: 1;
}

.RadMenu_Green .rmTopArrow,
.RadMenu_Green .rmBottomArrow
{
    height: 10px;
    width: 100%;
    background: #fff url(Menu/ArrowScrollUpDown.gif) no-repeat top center;
}

.RadMenu_Green .rmBottomArrow
{
    background-position: center -18px;
}

.RadMenu_Green .rmLeftArrow,
.RadMenu_Green .rmRightArrow
{
    width: 10px;
    height: 100%;
    background: #fff url(Menu/ArrowScrollLeftRight.gif) no-repeat left center;
}

.RadMenu_Green .rmRightArrow
{
    background-position: -18px center;
}

.RadMenu_Green .rmItem .rmDisabled .rmText
{
    color: #999;
}

.RadMenu_Green .rmRootGroup .rmItem .rmDisabled
{
    background: none;
}

.RadMenu_Green .rmGroup .rmItem .rmDisabled
{
    background-color: #fff;
}

.RadMenu_Green .rmRootGroup .rmSeparator,
.RadMenu_Green .rmGroup .rmSeparator
{
    background: #FF9632;
    border-top: 0px solid #676767;
    border-bottom: 0;
}

.RadMenu_Green .rmSeparator .rmText
{
    display: none;
}

.RadMenu_Green .rmHorizontal .rmSeparator
{
    height: 20px;
    width: 1px;
    line-height: 20px;
    border: 0;
}

.RadMenu_Green .rmVertical .rmSeparator
{
    height: 1px;
    margin: 3px 0;
    border: 0;
    line-height: 1px;
}

.RadMenu_Green .rmLeftImage
{
    margin: 2px;
}

.RadMenu_Green .rmSlide
{
    margin: -1px 0 0 -1px !important;
}

.RadMenu_Green .rmHorizontal .rmSlide
{
    margin-top: -2px !important;
}

.RadMenu_Green_rtl .rmSlide
{
    margin-left: 0 !important;
    margin-right: -1px !important;
}

.RadMenu_Green .rmGroup .rmSlide
{
    margin: 0 !important;
}

.RadMenu_Green .rmItem .rmDisabled:hover
{
    background: none;
}

[Ivan Zhekov]

Hello, Sara.

This thread is almost three years old. Any information provided here might be out of date or otherwise not relevant.

Please start a new support thread and include your page / part of project there. If you are not sure how to isolate a runnable page / portion of your project, you can refer to this article -- http://blogs.telerik.com/supportdept/posts/10-09-29/isolating-a-problem-in-a-sample-project.aspx -- it's a bit old, but still relevant.

In a nut shell, a simple page that exhibits the issue should do; make sure you include not only the page, but the code file as well; also all relevant assets such as images, scripts, styles etc should be included in the archive, as well as anything else you thing is relevant to your case.

Regards,
Ivan Zhekov
the Telerik team