Splitbar icon flashing...

4 posts, 0 answers
  1. Ian Wells
    Ian Wells avatar
    25 posts
    Member since:
    Jul 2009

    Posted 17 Jun 2010 Link to this post

    Hi all,

    I have a splitbar that I override the icon url with css. This works great, however when the splitbars are collapsed/expanded the icon flashes and shows the original telerik icon then back to my custom icon.

    This may seem trivial as it does not affect the usage of the bars but aesthetically it does not look very good. Does anyone please know if there is a way to stop this behaviour?

    Regards,
    Ian W


  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 23 Jun 2010 Link to this post

    Hi Ian Wells,

    I am not sure how exactly you have overidden the default styles but the correct way to do this is the following:

    <style type="text/css">       
             
        .rspCollapseBarExpand,         
        .rspCollapseBarExpandOver         
        {         
           background: url(myImageUrl) no-repeat 0 0!important;         
        }        
                
        .rspCollapseBarCollapse,         
        .rspCollapseBarCollapseOver       
        {         
           background: url(myImageUrl) no-repeat 0 0!important;             
        }        
                     
      </style>

     Note, that you should use the keyword !importnat in order to give a higher priority to your custom CSS and not to let it be overridden by the embedded styles.

    I hope that the provide information and code snippet are helpful, let me know how it goes.


    Greetings,
    Svetlina
    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. Ian Wells
    Ian Wells avatar
    25 posts
    Member since:
    Jul 2009

    Posted 13 Jul 2010 Link to this post

    Hi Svetlina,

    I'm afraid I still have the same issue. The style I am using is like so:

    <style type="text/css">
            .rspCollapseBarExpand,         
            .rspCollapseBarExpandOver         
            {         
               background: url(./expand.jpg) no-repeat 0 0!important;          
               height:15px!important;       
               width:15px!important;
                       
            }        
                    
            .rspCollapseBarCollapse,         
            .rspCollapseBarCollapseOver       
            {         
               background: url(./collapse.jpg) no-repeat 0 0!important;  
               height:15px!important;       
               width:15px!important;       
            }       
                    
            .rspResizeBar,       
            .rspResizeBarOver,       
            .rspCollapseBarWrapper       
            {       
                background:#ffffff!important;       
                height: 8px !important;       
            }       
         
        </style>

    However the image is still flashing when the splitbar is expanded to the right

    Ian W
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 15 Jul 2010 Link to this post

    Hi Ian Wells,

    Would you please provide more details? E,g do you by any chance have some other splitter which is horizontal? I tested the code below:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            html, form, body
            {
                margin: 0;
                padding: 0;
                height: 100%;
                width: 100%;
                overflow: hidden;
            }
            .rspCollapseBarExpand, .rspCollapseBarExpandOver
            {
                background: url(./ResizeBarVerticalSprites.gif) no-repeat 0 0 !important;
                height: 15px !important;
                width: 15px !important;
            }
            .rspCollapseBarCollapse, .rspCollapseBarCollapseOver
            {
                background: url(./ResizeBarVerticalSprites.gif) no-repeat 0 0 !important;
                height: 15px !important;
                width: 15px !important;
            }
            .rspResizeBar, .rspResizeBarOver, .rspCollapseBarWrapper
            {
                background: #ffffff !important;
                height: 8px !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadSplitter ID="splitterWebConsole" runat="server" Width="100%" Height="100%"
            VisibleDuringInit="false" Orientation="Vertical">
            <telerik:RadPane ID="paneHeader" runat="server" Height="43" Scrolling="None">
                Pane1
            </telerik:RadPane>
            <telerik:RadSplitBar ID="bar" runat="server" CollapseMode="Both">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="paneTopMenu" runat="server" Height="25" Scrolling="None">
                Pane2
            </telerik:RadPane>
        </telerik:RadSplitter>
        </form>
    </body>
    </html>

    where the sprite is not the expected one and while collapsing the panes I did not see the default image neither any flicker.

    Please, test this code and either modify it in order to reproduce the issue or provide very detailed reproduction steps along with some screenshots if you replicate it with the sample code.

    Kind regards,
    Svetlina
    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