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

Strange Css Behavior with Item Template

5 Answers 88 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
Sébastien
Top achievements
Rank 1
Sébastien asked on 19 Jul 2010, 03:04 PM
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

5 Answers, 1 is accepted

Sort by
0
Accepted
Yana
Telerik team
answered on 22 Jul 2010, 02:40 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Sébastien
Top achievements
Rank 1
answered on 22 Jul 2010, 06:48 PM
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.
0
Yana
Telerik team
answered on 23 Jul 2010, 07:44 AM
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-imageurl(Image/rtbDropDownHover.png);
}


Greetings,
Yana
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Sébastien
Top achievements
Rank 1
answered on 23 Jul 2010, 01:13 PM
Well it does not seem to work with ItemTemplate set.
0
Yana
Telerik team
answered on 29 Jul 2010, 09:29 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
ToolBar
Asked by
Sébastien
Top achievements
Rank 1
Answers by
Yana
Telerik team
Sébastien
Top achievements
Rank 1
Share this question
or