Strange Css Behavior with Item Template

6 posts, 1 answers
  1. Sébastien
    Sébastien avatar
    55 posts
    Member since:
    Jun 2010

    Posted 19 Jul 2010 Link to this post

    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
  2. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 22 Jul 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sébastien
    Sébastien avatar
    55 posts
    Member since:
    Jun 2010

    Posted 22 Jul 2010 Link to this post

    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.
  5. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 23 Jul 2010 Link to this post

    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
  6. Sébastien
    Sébastien avatar
    55 posts
    Member since:
    Jun 2010

    Posted 23 Jul 2010 Link to this post

    Well it does not seem to work with ItemTemplate set.
  7. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 29 Jul 2010 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017