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

MouseOver layout issue with custom EditorTool that shows text

1 Answer 29 Views
Editor
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 01 Nov 2012, 09:21 PM
I have a simple editor with a custom toolbar button.  It shows an icon on the left side, and some text.  When I mouse over the button the layout is messed up.  Can't figure out why this is happening or how to stop it.

The issue is the same in Chrome, and IE 9 (with or without Compatibility Mode).

This is the editor code:

<style type="text/css">
    .reTool_text .MergeFields
    {
        background-image: url(../Images/Icons/OneOffLetters/download.png) !important;
        background-position: 0px !important;
    }
</style>
 
 
                <telerik:RadEditor ID="RadEditor" runat="server" Width="100%" OnClientCommandExecuting="OnClientCommandExecuting"
                    AutoResizeHeight="true" EditModes="Design" ContentAreaMode="Div">
                    <Tools>
                        <telerik:EditorToolGroup>
                            <telerik:EditorDropDown Name="InsertImage" />
                            <telerik:EditorTool Name="MergeFields" ShowText="true" Text="Insert Merge Field" />
                        </telerik:EditorToolGroup>
                    </Tools>
                </telerik:RadEditor>

Attached are a couple images showing the button before and during a mouse-over.

1 Answer, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 05 Nov 2012, 07:46 AM
Hi,

you should use add the following to your styles:

<style type="text/css">
        .reTool_text .MergeFields {
            background-image: url(../Images/Icons/OneOffLetters/download.png) !important;
            background-position: 0 0 !important;
        }
         
        .reTool_text:hover {
            background-image: none !important;
            border: 0 !important;
        }
    </style>

Even there is text attribute for the custom tool, the background that comes from the CSS should be removed in order to work properly.

All the best,
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.
Tags
Editor
Asked by
David
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Share this question
or