Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Splitbar icon flashing...

3 Answers 78 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Ian Wells
Top achievements
Rank 1
Ian Wells asked on 17 Jun 2010, 08:58 PM
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


3 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 23 Jun 2010, 09:23 AM
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
0
Ian Wells
Top achievements
Rank 1
answered on 13 Jul 2010, 08:57 AM
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
0
Svetlina Anati
Telerik team
answered on 15 Jul 2010, 03:40 PM
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
Tags
Splitter
Asked by
Ian Wells
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Ian Wells
Top achievements
Rank 1
Share this question
or