MouseOver layout issue with custom EditorTool that shows text

2 posts, 0 answers
  1. David
    David avatar
    4 posts
    Member since:
    May 2011

    Posted 01 Nov 2012 Link to this post

    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.
  2. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 05 Nov 2012 Link to this post

    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.
Back to Top