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

Hiding Expand/Collapse Image

12 Answers 203 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Stephen
Top achievements
Rank 2
Stephen asked on 20 Apr 2009, 04:41 AM
Hi there

I have a couple of panel bars which will only ever have a single top level item in it with a varying number of children.  The panelbar is set to expand fully and the top level item is set to prevent collapse.  However, even though the user cannot collapse the item, the expand/collapse icons are still visible on the item (I am using the Vista skin on 2009 Q1).  Is there any way to remove the expand/collapse icon?  I tried setting the ExpandedCSSClass to nothing but without success.  Any ideas greatly appreciated.

Thanks

Stephen

12 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 20 Apr 2009, 04:01 PM
Hello Stephen,

Please add the following CSS in your page.
<style type="text/css">
        div.RadPanelBar .rpExpandable .rpText,
        div.RadPanelBar .rpExpanded .rpText
        {
            background-image:none;
        }
</style>

Greetings,
Albert
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Stephen
Top achievements
Rank 2
answered on 21 Apr 2009, 01:06 AM
Thanks for that.  However, this change will affect all PanelBars on the page.  Is there a way for it to apply only to specific panel bar items that are marked with PreventCollapse?

Thanks
Stephen
0
Accepted
Veselin Vasilev
Telerik team
answered on 21 Apr 2009, 08:16 AM
Hello Stephen,

The following CSS rule will be applied only to RadPanelBar having ID = RadPanelBar1:

<style type="text/css"> 
        div#RadPanelBar1.RadPanelBar .rpExpandable .rpText, 
        div#RadPanelBar1.RadPanelBar .rpExpanded .rpText 
        { 
            background-image:none; 
        } 
</style> 


Kind regards,
Veselin Vasilev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
kavitha
Top achievements
Rank 1
answered on 26 Dec 2010, 09:45 PM
Hello,

  I am trying to do the same thing. I use Telerik Q3 2010. The following style element when added is not hiding the image. Can you please suggest what might be the issue?

Thanks,
Kavitha
0
Yana
Telerik team
answered on 27 Dec 2010, 10:24 AM
Hello Kavitha,

Please try it like this:

div#RadPanelBar1.RadPanelBar span.rpExpandHandle {
  background-image: none !important;
}

All the best,
Yana
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
kavitha
Top achievements
Rank 1
answered on 27 Dec 2010, 06:40 PM
Hello Yana,

  That is not working either. I tried setting that in both the PanelBar.Vista.css as well as a style element on my aspx page, but the image is still displayed on the RadPanelBar.

Any thoughts?

Thanks,
0
kavitha
Top achievements
Rank 1
answered on 27 Dec 2010, 06:43 PM
It worked this time!! I had skipped the !important after the none earlier. Thanks a lot for your help.Thank you very much !
0
ghini
Top achievements
Rank 2
answered on 23 Oct 2014, 07:26 AM
radpanelbar.jpg
Hi,
I would like to remove all the icons from the RadPanelBar.
I used this css:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestMenu.aspx.vb" Inherits="TestMenu" %>
 
<!DOCTYPE html>
 
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">    
        .new .rpOut .rpExpandHandle {
            background-image: none !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <telerik:RadPanelBar ID="RadPanelBar1" Runat="server" Skin="MetroTouch" CssClass="new">
            <Items>
                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem1">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem2">
                    <Items>
                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 3">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem3">
                    <Items>
                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem4">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem5">
                    <Items>
                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar>
    </div>
    </form>
</body>
</html>


I would also delete the circle ...

Thanks!
0
ghini
Top achievements
Rank 2
answered on 26 Oct 2014, 01:29 PM
Please....
0
Hristo Valyavicharski
Telerik team
answered on 27 Oct 2014, 12:17 PM
Hi ghini,

Try to add this css:
<style type="text/css">
    html .RadPanelBar_MetroTouch .rpExpandable .rpExpandHandle {
        background-image:none;
    }
 
    html .RadPanelBar_MetroTouch .rpExpandHandle {
        border: 0px solid;
    }
</style>

I hope this helps.

Regards,
Hristo Valyavicharski
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
ghini
Top achievements
Rank 2
answered on 09 Nov 2014, 10:19 PM
Hi Hristo,
I've update my project to last version 2014.3.1024.45 and your suggestion does not work anymore!

New suggestion?

Thanks!
0
Hristo Valyavicharski
Telerik team
answered on 10 Nov 2014, 09:12 AM
These styles should help:

    <style type="text/css">
        html .RadPanelBar_MetroTouch .rpExpandable .rpExpandHandle {
            background-image: none;
            border: 0px solid;
        }
    </style>


Regards,
Hristo Valyavicharski
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
PanelBar
Asked by
Stephen
Top achievements
Rank 2
Answers by
Atanas Korchev
Telerik team
Stephen
Top achievements
Rank 2
Veselin Vasilev
Telerik team
kavitha
Top achievements
Rank 1
Yana
Telerik team
ghini
Top achievements
Rank 2
Hristo Valyavicharski
Telerik team
Share this question
or