PanelBar Appearance/Behavior

[John]

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/

 

[Shinu]

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.

[John]

Thanks so much Shinu. That should work.