This is a migrated thread and some comments may be shown as answers.

RTL with Images in IE7 or IE8

7 Answers 97 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Gary
Top achievements
Rank 1
Gary asked on 06 Jul 2012, 06:00 PM
The following code does not render correctly in IE7 or IE8. It works fine in IE9 and other non IE browsers. It seems that if I remove the images from the menu it will render fine in IE7 or IE8.

Please let me know a solution to get this to work with the images, rtl, and width is 100%.

Thanks

<%@ Page Language="C#" AutoEventWireup="true"  %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
    <title></title>
</head>
<body>
<form id="form1" runat="server">
 
<telerik:RadScriptManager ID="ScriptManager" runat="server" />
<telerik:RadMenu ID="RadMenu1" runat="server" EnableRootItemScroll="true" Width="100%" dir="rtl" EnableAutoScroll="true" >
<Items>
<telerik:RadMenuItem Text="Home" ImageUrl="/images/icons/102.gif"  />
<telerik:RadMenuItem Text="Task List" ImageUrl="/images/icons/102.gif" />
<telerik:RadMenuItem Text="IT Admin" ImageUrl="/images/icons/102.gif" />
<telerik:RadMenuItem Text="Content List" />
<telerik:RadMenuItem Text="My Knowledge Views" />
<telerik:RadMenuItem Text="Start Process" ImageUrl="/images/icons/102.gif" />
<telerik:RadMenuItem Text="Running Workflows" />
</Items>
</telerik:RadMenu>
 
 
</form>
 
</body>
</html>

7 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 09 Jul 2012, 04:57 AM
Hi Jay O'Brien,

Try overriding the default CSS as follows.

CSS:
<style type="text/css">
    .RadMenu_Default_rtl .rmText
        {
            position: fixed !important;
        }
</style>

Hope this helps.

Thanks,
Princy.
0
Gary
Top achievements
Rank 1
answered on 09 Jul 2012, 03:11 PM
Unfortunately that makes the menu items disappear. See screenshot. Any other solutions? Telerik?
0
Princy
Top achievements
Rank 2
answered on 10 Jul 2012, 04:59 AM
Hello,

Try the following code snippet to achieve your scenario.

CSS:
<style type="text/css">
        .RadMenu_Default_rtl .rmItem
        {
            position: relative !important;
        }
</style>

ASPX:
<telerik:RadMenu ID="RadMenu1" runat="server" EnableRootItemScroll="true" Width="100%" dir="rtl" EnableAutoScroll="true">
   <Items>
      <telerik:RadMenuItem Text="Home" ImageUrl="../Images/bullet5.jpg" />
      <telerik:RadMenuItem Text="Task List" ImageUrl="../Images/bullet5.jpg" />
      <telerik:RadMenuItem Text="IT Admin" ImageUrl="../Images/bullet5.jpg" />
      <telerik:RadMenuItem Text="Content List" />
      <telerik:RadMenuItem Text="My Knowledge Views" />
      <telerik:RadMenuItem Text="Start Process" ImageUrl="../Images/bullet5.jpg" />
      <telerik:RadMenuItem Text="Running Workflows" />
   </Items>
</telerik:RadMenu>

Attached is the screenshot.

Thanks,
Princy.
0
Gary
Top achievements
Rank 1
answered on 10 Jul 2012, 03:29 PM
Princy thanks for your help on this. Unfortunately that still has not resolved the issue. Not sure if you are running in the IE 7 document mode but that is where I am seeing the issue. It looks great in IE 9 document mode. Attached is a screenshot in IE 7 document mode.
0
Ivan Zhekov
Telerik team
answered on 12 Jul 2012, 12:12 PM
Hello, Jay.

I am not 100% sure why and what was wrong, but I was able to fix it quite easily:

1) I moved the styles for the width from the menu, to a css snippet
2) I tweaked the snippet a bit no to be using floats.

See the attached file.

All the best,
Ivan Zhekov
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.
0
Jay
Top achievements
Rank 1
answered on 12 Jul 2012, 02:58 PM
Ivan,

Thanks for the reply. Unfortunately the scrolling does not work now. If you shrink the window and refresh you will notice the menu items go to a second line. I need to have the scrolling available.

Thanks
0
Ivan Zhekov
Telerik team
answered on 16 Jul 2012, 08:38 AM
Hello, Jay.

For scrolling to work you need to set width e.g. width 100%; and then you need to tweak the styles a bit.

I have updated the example and attached it.

Regards,
Ivan Zhekov
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.
Tags
Menu
Asked by
Gary
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Gary
Top achievements
Rank 1
Ivan Zhekov
Telerik team
Jay
Top achievements
Rank 1
Share this question
or