RTL with Images in IE7 or IE8

8 posts, 0 answers
  1. Jay O'Brien
    Jay O'Brien avatar
    39 posts
    Member since:
    Dec 2008

    Posted 06 Jul 2012 Link to this post

    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>
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 08 Jul 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jay O'Brien
    Jay O'Brien avatar
    39 posts
    Member since:
    Dec 2008

    Posted 09 Jul 2012 Link to this post

    Unfortunately that makes the menu items disappear. See screenshot. Any other solutions? Telerik?
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 09 Jul 2012 Link to this post

    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.
  6. Jay O'Brien
    Jay O'Brien avatar
    39 posts
    Member since:
    Dec 2008

    Posted 10 Jul 2012 Link to this post

    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.
  7. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 12 Jul 2012 Link to this post

    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.
  8. Jay
    Jay avatar
    87 posts
    Member since:
    Nov 2007

    Posted 12 Jul 2012 Link to this post

    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
  9. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 16 Jul 2012 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017