Strange Css Behavior with Item Template

[Sébastien]

I'm trying to put checkbox in menu item and I started from this tutorial :
 http://www.telerik.com/help/aspnet-ajax/tool_templatesoverview.html

I'm able to put checkbox whithout problem, but I found that the behavior of the CSS is strange when I mouse over. The background image is cut instead of occupying all the menu item(see attached images for comparaison of the menu item with and without item template set). I want to know if I can have the original behavior or at least remove the background image beacause I can't seem to be able to replace it. In fact, I'm not very experienced in css, I tried both those Css in setting the hoveredCssClass :

Remove the image
background-image:none !important;

Replace the image
background-image:"~\Image\img.png" !important;

Still the same result. Here is the code, mostly from the tutorial, just replace a textbox with a checkbox.

<telerik:RadToolBar ID="RadToolBar1" runat="server">
 <Items>
   <telerik:RadToolBarButton runat="server" Text="Button 1" DisplayName="TextBox1">
     <ItemTemplate>
       <input type="text" value='<%# DataBinder.Eval(Container, "Attributes['DisplayName']") %>' />
     </ItemTemplate>
   </telerik:RadToolBarButton>
   <telerik:RadToolBarDropDown runat="server" Text="DropDown 1" DisplayName="DropDown">
     <Buttons>
       <telerik:RadToolBarButton runat="server" Text="Child Button 1" DisplayName="TextBox11">
         <ItemTemplate>
           <input type="checkbox" value='<%# DataBinder.Eval(Container, "Attributes['DisplayName']") %>' />
         </ItemTemplate>
       </telerik:RadToolBarButton>
       <telerik:RadToolBarButton runat="server" Text="Child Button 2" DisplayName="TextBox21">
         <ItemTemplate>
          <input type="text" value='<%# DataBinder.Eval(Container, "Attributes['DisplayName']") %>' />
         </ItemTemplate>
       </telerik:RadToolBarButton>
     </Buttons>
   </telerik:RadToolBarDropDown>
   <telerik:RadToolBarSplitButton runat="server" Text="SplitButton 1" DisplayName="SplitButton">
     <Buttons>
       <telerik:RadToolBarButton runat="server" Text="Child Button 1">
       </telerik:RadToolBarButton>
       <telerik:RadToolBarButton runat="server" Text="Child Button 2">
       </telerik:RadToolBarButton>
     </Buttons>
   </telerik:RadToolBarSplitButton>
 </Items>
</telerik:RadToolBar>

Hope you find my solution.
Sébastien

[Yana]

Hello Sébastien,

You can remove the hovered style like this:

<style type="text/css">
     .RadToolBarDropDown .rtbTemplate { background-image: none !important;}
</style>

Regards,
Yana
the Telerik team

[Sébastien]

Here is the code I used to have the same behavior on mouse over then without the item template if anyone has to do this. Feel free to add any comment. First I used the solution that yana gaved me. Then I enclose what was in my item template in this :

<p onmouseover="Over(this,event);" onmouseout="Out(this,event);">
    <!-- ITEM TEMPLATE -->
</p>

Than add those two javascript function :

function Over(sender, args) {
    sender.style.background = "url(Image/rtbDropDownHover.png)";
}

function Out(sender, args) {
    sender.style.backgroundImage = "none";
}

I took the image corresponding to my skin, in telerik instalation folder. If anyone have a better idea to acheive this let me know.

[Yana]

Hi Sébastien,

Actually there's css class "rtbItemHovered"  which is rendered when the item is hovered, so you don't need to add this javascript, just set the style to this class:

.RadToolBar .rtbItemHovered {
   background-image: url(Image/rtbDropDownHover.png);
}

Greetings,
Yana
the Telerik team

[Sébastien]

Well it does not seem to work with ItemTemplate set.

[Yana]

Hi Sébastien,

I guess that it doesn't overwrite the "background: none" setting, please try it like this:

div.RadToolBarDropDown .rtbHovered {
 background-image: url('Image/rtbDropDownHover.png') !important;
}

Greetings,
Yana
the Telerik team