Tool Icon and Showtext mouseover weird display

12 posts, 1 answers
  1. Khanh
    Khanh avatar
    39 posts
    Member since:
    Jun 2008

    Posted 02 Jan 2013 Link to this post

    Hello,

    I have the toggle full screen icon and show text on my toolbar.  When I mouse over it some weird lines appear.  It looks correct when I remove the text.  This applies to FF17, Chrome 23 and IE 10.

    This is the test page I'm using:
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="ztest6.aspx.vb" Inherits="ztest6" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
     
    <head runat="server">
        <title></title>
            
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="sm1" runat="server"></asp:ScriptManager>
            <div style="width:600px;">          
                 <telerik:RadEditor Skin="Default" ID="RadEditor1" runat="server" Width="100%" Height="300px" ToolsFile="~/includes/NoTools.xml">
                </telerik:RadEditor>
                 
            </div>
        </form>
    </body>
    </html>

    NoTools.xml
    <?xml version="1.0" encoding="utf-8" ?>
    <root
        <tools name="EnhancedEditToolbar" dockingZone="Top" dockable="true" enabled="true">
            <tool name="ToggleScreenMode" Text="Toggle Full Screen" ShowText="True" />       
        </tools>
    </root>
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 02 Jan 2013 Link to this post

    Hi,

    Try overriding the default CSS as follows.

    CSS:
    <style type="text/css">
        .Default .reToolbar .reTool_text:hover
        {
            background-image:none !important;
        }
    </style>

    Hope this helps.

    Regards,
    Princy.
  3. Khanh
    Khanh avatar
    39 posts
    Member since:
    Jun 2008

    Posted 03 Jan 2013 Link to this post

    Thanks, Princy.  I added a few more lines to your css.  It looks better now but I no longer get get the nice hover effect.

    <style>
      .Default .reToolbar .reTool_text:hover, .reTool_text
        {
            background-image:none !important;
            border:0 !important;
        } 
    </style>

  4. Rumen
    Admin
    Rumen avatar
    14084 posts

    Posted 03 Jan 2013 Link to this post

    Hi,

    The problem should be fixed in the latest version. Could you please upgrade to 2012.3.1205 (Q3 2012 SP1)?

    Best regards,
    Rumen
    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.
  5. Khanh
    Khanh avatar
    39 posts
    Member since:
    Jun 2008

    Posted 03 Jan 2013 Link to this post

    Rumen,

    I'm sorry to report but version 2012.3.1205 does not work either.  Same problem.  I was running on 2012.3.1212.

    Thanks,
    Khanh 
  6. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 04 Jan 2013 Link to this post

    Hi,

    I tried to replicate the issue you are facing under the telerik version 2012, 3, 1205, 35. Please make sure that you are using the latest version of telerik controls.

    Regards,
    Princy.
  7. Rumen
    Admin
    Rumen avatar
    14084 posts

    Posted 04 Jan 2013 Link to this post

    Hello,

    I was also unable to replicate the issue with version 2012.3.1205. If you are unable to solve it with the latest build, please, open a support ticket and provide a simple working project which demonstrates it. I will debug it and provide a solution.

    All the best,
    Rumen
    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. Khanh
    Khanh avatar
    39 posts
    Member since:
    Jun 2008

    Posted 04 Jan 2013 Link to this post

    Rumen and Princy,

    I have submitted a support ticket 645426 with a working example.

    Thanks for your support.
    Khanh
  9. Rumen
    Admin
    Rumen avatar
    14084 posts

    Posted 04 Jan 2013 Link to this post

    Hello,

    I examined the provided project and was able to fix the problem by deleting the dockingZone attribute from the NoTools.xml file.

    The dockable="true" and enabled="true" should be also removed, because they are not functional for RadEditor for ASP.NET AJAX.

    Regards,
    Rumen
    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.
  10. Khanh
    Khanh avatar
    39 posts
    Member since:
    Jun 2008

    Posted 05 Jan 2013 Link to this post

    Hi Rumen,

    I replied back on the support ticket.  I line now only appears when in full screen.

    Thanks,
    Khanh
  11. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 07 Jan 2013 Link to this post

    Hello,

    We have tested the issue and found this is a bug. It will be fixed for Q1 release planned for the mid February. For  now you could use the following CSS fix:

    Copy Code
    <head runat="server">
        <title></title>
        <style type="text/css">
            .reToolbar .reTool_text:hover {
                background-repeat: repeat-x;
                background-position: 0 -100px;
                margin-left: 0;
                margin-right: 0;
            }
             
            .reToolbar .reTool_text.reTool_selected,
            .reToolbar .reTool_text.reTool_selected:hover {
                background-repeat: repeat-x;
                background-position: 0 -174px;
                margin-left: 0;
                margin-right: 0;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <br />
        <br />
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <telerik:RadEditor ID="RadEditor1" runat="server" Width="800" EnableComments="true"
            ContentAreaMode="Div" ToolsFile="NoTools.xml">
        </telerik:RadEditor>
        </form>
    </body>
    </html>

    The second issue in IE that the right rounded corners goes down to the next row is a very strange bug existing in IE9 only and it seems it is dependable by the string width. If you replace Text="Toggle Full Screen" with Text="Bold" - it will look fine. If it is only Text="Toggle" - it will be also fine, but it will not be fine if it is Text="Toggle Full". I have tried a lot if different scenarios to find what is the dependency but to no avail. I found that the following Text="Toggle FullScreen" works fine, and this is the best suggestion I could give you at the moment as I could not confirm if this is browser bug or bug in RadEditor.

    Kind regards,
    Bozhidar
    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.
  12. Khanh
    Khanh avatar
    39 posts
    Member since:
    Jun 2008

    Posted 09 Jan 2013 Link to this post

    Thanks, Bozhidar,

    Looks a lot better.  I have closed the support ticket.

    Thanks,
    Khanh
Back to Top