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

PanelBar Appearance/Behavior

2 Answers 26 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 16 Aug 2013, 06:58 PM
I am considering purchasing the ASP.NET AJAX suite of controls, but first wanted to be sure I could duplicate the following (link listed below) panel behavior. I am currently using jQuery, jQueryUI and plugins and the maintenance has become burdensome. Can I put space between Telerik PanelBar panels like I'm doing on my web site now?

http://moffat.infoenvoy.com/

 

2 Answers, 1 is accepted

Sort by
0
Accepted
Shinu
Top achievements
Rank 1
answered on 19 Aug 2013, 05:36 AM
Hi John,

Please try the following code snippet.

ASPX:
<telerik:RadPanelBar ID="RadPanelBar1" runat="server">
    <Items>
        <telerik:RadPanelItem runat="server" Text="Item1">
            <Items>
                <telerik:RadPanelItem runat="server" Text="Item1.1">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Item1.2">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Item1.3">
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem runat="server" Text="Item2">
            <Items>
                <telerik:RadPanelItem runat="server" Text="Item2.1">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Item2.2">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Item2.3">
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem runat="server" Text="Item3">
            <Items>
                <telerik:RadPanelItem runat="server" Text="Item3.1">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Item3.2">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Item3.3">
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelItem>
    </Items>
</telerik:RadPanelBar>

CSS:
<style type="text/css">
    .RadPanelBar ul.rpRootGroup li.rpItem
    {
        margin-bottom: 20px !important;
    }
    .RadPanelBar ul.rpGroup li.rpItem
    {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .RadPanelBar_Default .rpRootGroup
    {
        border: none !important;
    }
    .rpSlide
    {
        border: 1px solid gray !important;
    }
</style>

Thanks,
Shinu.
0
John
Top achievements
Rank 1
answered on 19 Aug 2013, 09:27 AM
Thanks so much Shinu. That should work.
Tags
PanelBar
Asked by
John
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
John
Top achievements
Rank 1
Share this question
or