Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Tool Icon and Showtext mouseover weird display

11 Answers 72 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Khanh
Top achievements
Rank 1
Khanh asked on 02 Jan 2013, 05:52 PM
Untitled.png
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>

11 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 03 Jan 2013, 05:52 AM
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.
0
Khanh
Top achievements
Rank 1
answered on 03 Jan 2013, 12:46 PM
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>

0
Rumen
Telerik team
answered on 03 Jan 2013, 04:19 PM
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.
0
Khanh
Top achievements
Rank 1
answered on 03 Jan 2013, 04:47 PM
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 
0
Princy
Top achievements
Rank 2
answered on 04 Jan 2013, 06:05 AM
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.
0
Rumen
Telerik team
answered on 04 Jan 2013, 08:53 AM
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.
0
Khanh
Top achievements
Rank 1
answered on 04 Jan 2013, 01:52 PM
Rumen and Princy,

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

Thanks for your support.
Khanh
0
Rumen
Telerik team
answered on 04 Jan 2013, 02:55 PM
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.
0
Khanh
Top achievements
Rank 1
answered on 05 Jan 2013, 04:24 PM
Hi Rumen,

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

Thanks,
Khanh
0
Accepted
Bozhidar
Telerik team
answered on 07 Jan 2013, 03:37 PM
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.
0
Khanh
Top achievements
Rank 1
answered on 09 Jan 2013, 08:46 PM
Thanks, Bozhidar,

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

Thanks,
Khanh
Tags
Editor
Asked by
Khanh
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Khanh
Top achievements
Rank 1
Rumen
Telerik team
Bozhidar
Telerik team
Share this question
or