Skin breaks multiple radpanels controls...

[Karl]

I've spent some time designing my own custom skin for a RadPanel and it seems to work well at the moment. However, when I apply the skin to multiple panels on the same page the skin breaks and goes completely out the window.

I've attached an image which hopefully shows what im trying to do.

If I have three panels (by this I mean RadPanels) on my page and only the first one has the skin applied while the others use the built-in skin and the page and panels work ok. If I apply the custom skin to the other 2 panels (the ones that used the built-in skin) the styles break completely and almost revert back to standard!

If the skin cannot be applied to multiple panels, then how would I give the impression of multiple panels, given that when I expand them (and only when theyre expanded) they need to have a rounded bottom?

What I would like is for each panel to look and behave like the top one in the first and second image.


Any help is appreciated...
Thanks,
Karl

[Karl]

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <%--Working! Multiple RadPanels, but only one panel has custom skin...--%>
        <div class="Container210"><%-- div is 210 wide with overflow: visible; --%>
            <div class="PanelContainer210"> <%-- div is 210 wide with overflow: visible; --%>
                <telerik:RadPanelBar ID="SearchPanel" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" Skin="Panel210" Width="210" >
                        <CollapseAnimation Duration="100" Type="Linear" />
                        <ExpandAnimation Duration="100" Type="Linear" />
                    <Items>
                        <telerik:RadPanelItem Value="Search" Text="Search" >
                            <Items>
                                <telerik:RadPanelItem>
                                    <ItemTemplate>
                                        <div class="PanelTemplate210">
                                            This is some text<br />
                                            This is some text<br />
                                            This is some text<br />
                                            This is some text<br />
                                            This is some text
                                        </div>
                                        <img src="../App_Themes/ServiceTrack.Net/Images/Furniture/Box210Bottom.png" /> <%--gives expanded panel round bottom--%>
                                    </ItemTemplate>
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelBar>
            </div>
            <br />
            <div class="PanelContainer210"><%-- div is 210 wide with overflow: visible; --%>
                <telerik:RadPanelBar ID="RecentOrdersPanel" runat="server" EnableEmbeddedSkins="true" Width="210"  >
                        <CollapseAnimation Duration="100" Type="Linear" />
                        <ExpandAnimation Duration="100" Type="Linear" />
                    <Items>
                        <telerik:RadPanelItem Value="RecentOrders" Text="Recent Orders" >
                            <Items>
                                <telerik:RadPanelItem>
                                    <ItemTemplate>
                                        This<br />
                                        Is <br />
                                        Some<br />
                                        Text<br />
                                    </ItemTemplate>
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelBar>
            </div>
            <br />
            <div class="PanelContainer210"><%-- div is 210 wide with overflow: visible; --%>
                <telerik:RadPanelBar ID="FavouriteOrdersPanel" runat="server" EnableEmbeddedSkins="true" Width="210"  >
                        <CollapseAnimation Duration="100" Type="Linear" />
                        <ExpandAnimation Duration="100" Type="Linear" />
                    <Items>
                        <telerik:RadPanelItem Value="FavouriteOrders" Text="Favourite Orders" >
                            <Items>
                                <telerik:RadPanelItem>
                                    <ItemTemplate>
                                        This<br />
                                        Is <br />
                                        Some<br />
                                        Text<br />
                                    </ItemTemplate>
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelBar>
            </div>

        </div>
        <%--Broken! Multiple RadPanels using the same custom Skin --%>
        <div class="Container210"> <%-- div is 210 wide with overflow: visible; --%>

            <div class="PanelContainer210"> <%-- div is 210 wide with overflow: visible; --%>
                <telerik:RadPanelBar ID="SearchPanel2" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" Skin="Panel210" Width="210" >
                        <CollapseAnimation Duration="100" Type="Linear" />
                        <ExpandAnimation Duration="100" Type="Linear" />
                    <Items>
                        <telerik:RadPanelItem Value="Search" Text="Search" >
                            <Items>
                                <telerik:RadPanelItem>
                                    <ItemTemplate>
                                        <div class="PanelTemplate210">
                                            This is some text<br />
                                            This is some text<br />
                                            This is some text<br />
                                            This is some text<br />
                                            This is some text
                                        </div>
                                        <img src="../App_Themes/ServiceTrack.Net/Images/Furniture/Box210Bottom.png" /> <%--gives expanded panel round bottom--%>
                                    </ItemTemplate>
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelBar>
            </div>
            <br />
            <div class="PanelContainer210"> <%-- div is 210 wide with overflow: visible; --%>
                <telerik:RadPanelBar ID="RecentOrdersPanel2" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" Skin="Panel210" Width="210"  >
                        <CollapseAnimation Duration="100" Type="Linear" />
                        <ExpandAnimation Duration="100" Type="Linear" />
                    <Items>
                        <telerik:RadPanelItem Value="RecentOrders" Text="Recent Orders" >
                            <Items>
                                <telerik:RadPanelItem>
                                    <ItemTemplate>
                                        This<br />
                                        Is <br />
                                        Some<br />
                                        Text<br />
                                    </ItemTemplate>
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelBar>
            </div>
            <br />
            <div class="PanelContainer210"> <%-- div is 210 wide with overflow: visible; --%>
                <telerik:RadPanelBar ID="FavouriteOrdersPanel2" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" Skin="Panel210" Width="210"  >
                        <CollapseAnimation Duration="100" Type="Linear" />
                        <ExpandAnimation Duration="100" Type="Linear" />
                    <Items>
                        <telerik:RadPanelItem Value="FavouriteOrders" Text="Favourite Orders" >
                            <Items>
                                <telerik:RadPanelItem>
                                    <ItemTemplate>
                                        This<br />
                                        Is <br />
                                        Some<br />
                                        Text<br />
                                    </ItemTemplate>
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelBar>
            </div>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

[Karl]

div.RadPanelBar_Panel210 .rpRootGroup
{
    border: 0;
    background-color: #f0f0f0;
}

.RadPanelBar_Panel210 a.rpLink,
.RadPanelBar_Panel210 .rpTemplate
{
    color: #000000;
    font: bold 12px/24px Arial, Helvetica, sans-serif;
}

* + html div.RadPanelBar_Panel210 .rpItem
{
    display: inline-block;
    font-size: 0;
    line-height: 0;
    padding-bottom: 0px;
}

* html div.RadPanelBar_Panel210 .rpItem
{
    display: inline-block;
    font-size: 0;
    line-height: 0;
    padding-bottom: 0px;
}

div.RadPanelBar_Panel210 .rpLast
{
    border-width: 0px;
}

div.RadPanelBar_Panel210 a.rpLink,
div.RadPanelBar_Panel210 .rpGroup a.rpLink
{
    border: 0;
    padding: 0px;
}

div.RadPanelBar_Panel210 a.rpLink .rpOut,
div.RadPanelBar_Panel210 .rpGroup a.rpLink .rpOut
{
    padding-bottom: 0px;
    border-bottom: 0;
}

div.RadPanelBar_Panel210 .rpGroup a.rpLink .rpOut
{
    padding-bottom: 0;
}

/* compensate for borders */

div.RadPanelBar_Panel210 a.rpLink:hover,
div.RadPanelBar_Panel210 .rpGroup a.rpLink:hover
{
    padding: 0;
    border: 0px solid #d6d6d6;
    background: transparent url('PanelBar/RootItemBg.png') no-repeat 0 0;
}

div.RadPanelBar_Panel210 .rpRootGroup a.rpFocused,
div.RadPanelBar_Panel210 .rpRootGroup a.rpFocused:hover,
div.RadPanelBar_Panel210 .rpRootGroup a.rpSelected,
div.RadPanelBar_Panel210 .rpRootGroup a.rpSelected:hover
{
    border: 0;
    padding: 0px;
    background-color: #999999;
    background-image: url('PanelBar/Box210Top.png');
    color: #888888;
}

/* <disabled items> */
div.RadPanelBar_Panel210 a.rpDisabled,
div.RadPanelBar_Panel210 a.rpDisabled:hover
{
    color: #bababa;
    cursor: default;
    background-image: none;
    border: 0;
    padding: 0px;
}

div.RadPanelBar_Panel210 a.rpDisabled .rpOut,
div.RadPanelBar_Panel210 a.rpDisabled:hover .rpOut
{
    padding-bottom: 0px;
    border: 0;
}
/* </disabled items> */


/* <subitems> */
div.RadPanelBar_Panel210 .rpGroup a.rpLink,
div.RadPanelBar_Panel210 .rpGroup .rpTemplate
{
    background-image: none;
    font-weight: normal;
}

/* <subitems (disabled)> */
div.RadPanelBar_Panel210 .rpGroup a.rpDisabled,
div.RadPanelBar_Panel210 .rpGroup a.rpDisabled:hover
{
    background-image: none;
    color: #bababa;
    border: 0;
    padding: 0px;
}
/* </subitems (disabled)> */

/* <subitems> */

/*      <expand arrows> */
.RadPanelBar_Panel210 .rpRootGroup .rpOut
{
    padding-left: 7px;
}

div.RadPanelBar_Panel210 .rpLevel2 .rpTemplate,
div.RadPanelBar_Panel210 .rpLevel2 .rpOut,
div.RadPanelBar_Panel210 .rpLevel3 .rpTemplate,
div.RadPanelBar_Panel210 .rpLevel3 .rpOut
{
    padding-left: 7px;
}

.RadPanelBar_Panel210 .rpSlide
{
    padding-left: 0px;
}

.RadPanelBar_Panel210_rtl .rpRootGroup .rpOut
{
    padding-left: auto;
    padding-right: 7px;
}

div.RadPanelBar_Panel210_rtl .rpLevel2 .rpTemplate,
div.RadPanelBar_Panel210_rtl .rpLevel2 .rpOut,
div.RadPanelBar_Panel210_rtl .rpLevel3 .rpTemplate,
div.RadPanelBar_Panel210_rtl .rpLevel3 .rpOut
{
    padding-left: auto;
    padding-right: 7px;
}

.RadPanelBar_Panel210_rtl .rpSlide
{
    padding-left: auto;
    padding-right: 10px;
}

div.RadPanelBar_Panel210 .rpText
{
    padding: 0 0 0 10px;
}

div.RadPanelBar_Panel210_rtl .rpText
{
    padding: 0 10px 0 0;
}

div.RadPanelBar_Panel210 .rpImage
{
    padding: 4px 5px 3px 0;
}

div.RadPanelBar_Panel210_rtl .rpImage
{
    padding: 4px 0 3px 5px;
}

/* <expand arrows> */
.RadPanelBar_Panel210 a.rpExpandable span.rpExpandHandle,
.RadPanelBar_Panel210 a.rpExpanded span.rpExpandHandle
{
    background-color: transparent;
    background-image: url('PanelBar/Expandable.png');
    width: 17px;
    height: 17px;
    background-repeat: no-repeat;
    float: left;
    margin: 9px 0 0 0px;
}

.RadPanelBar_Panel210_rtl a.rpExpandable span.rpExpandHandle,
.RadPanelBar_Panel210_rtl a.rpExpanded span.rpExpandHandle
{
    background-image: url('PanelBar/ExpandableRTL.png');
    float: right;
    margin: 0 0 0 0;
}

.RadPanelBar_Panel210 a.rpExpandable .rpExpandHandle { background-position: 0px -4px; }
.RadPanelBar_Panel210 a.rpExpanded .rpExpandHandle { background-position: 0px -180px; }

.RadPanelBar_Panel210 .rpGroup a.rpExpandable span.rpExpandHandle { background-position: 0px -342px; }
.RadPanelBar_Panel210 .rpGroup a.rpExpanded span.rpExpandHandle { background-position: 0px -482px;  }

.RadPanelBar_Panel210_rtl .rpGroup a.rpExpandable span.rpExpandHandle,
.RadPanelBar_Panel210_rtl .rpGroup a.rpExpanded span.rpExpandHandle
{
    margin: 4px -5px 0 0;
}

/*      </expand arrows> */

/* </background positioning> */




div.RadPanelBar_Panel210
{
    margin-top: 0px;
    width: 210px;
}

div.RadPanelBar_Panel210 .rpRootGroup
{
    background-color: #ffffff;
}

div.RadPanelBar_Panel210 .rpRootGroup .rpLink
{
    background-image: url('ImageHandler.ashx?mode=get&suite=aspnet-ajax&control=PanelBar&skin=Panel210&file=Box210Top.png&t=1608104057');
    /*background-image: url('PanelBar/Box210Top.png');*/
    text-align: left;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    line-height: 36px;
    height: 36px;
    color: #888888;
    font-size: 16px;
    font-weight: normal;
}

div.RadPanelBar_Panel210 .rpRootGroup .rpLink:hover
{
    border-bottom: 0px solid;
    text-align: left;
    border-left: 0px solid;
    line-height: 36px;
    font-size: 16px;
    border-top: #D6D6D6 0px solid;
    border-right: 0px solid;
}

div.RadPanelBar_Panel210 .rpRootGroup .rpExpandable
{
    background-image: url('PanelBar/Box210Top.png');
    text-align: left;
}

div.RadPanelBar_Panel210 .rpRootGroup .rpExpanded
{
    background-image: url('PanelBar/Box210Top.png');
    text-align: left;
}

div.RadPanelBar_Panel210 .rpRootGroup .rpSelected
{
    background-image: url('PanelBar/Box210Top.png');
    text-align: left;
}

div.RadPanelBar_Panel210 .rpRootGroup .rpDisabled
{
    background-image: url('PanelBar/Box210Top.png');
    text-align: left;
    background-position: 0px 0px;
}

div.RadPanelBar_Panel210 .rpRootGroup .rpDisabled:hover
{
    background-image: url('PanelBar/Box210Top.png');
    text-align: left;
    background-position: 0px 0px;
}

div.RadPanelBar_Panel210 .rpRootGroup .rpLink .rpText
{
    padding-left: 0px;
    width: 210px;
}

div.RadPanelBar_Panel210 .rpItem .rpGroup .rpLink
{
    background-image: url('PanelBar/Box210Top.png');
    /*BACKGROUND-IMAGE: none;*/
    background-color: #ffffff;
    width: 210px;
    background-position: 0px 0px;
    padding-bottom: 0px;
}

div.RadPanelBar_Panel210 .rpItem .rpGroup .rpLink:hover
{
    background-image: url('PanelBar/Box210Top.png');
    border-bottom: 0px solid;
    border-left: 0px solid;
    border-top: 0px solid;
    border-right: 0px solid;
    background-color: #ffffff;
    padding-bottom: 0px;
}

div.RadPanelBar_Panel210 .rpItem .rpGroup .rpSelected
{
    background-image: url('PanelBar/Box210Top.png');
    padding-bottom: 0px;
    background-color: #ffffff;
    padding-left: 0px;
    padding-right: 0px;
    color: #888888;
    padding-top: 0px;
}

div.RadPanelBar_Panel210 .rpItem .rpGroup .rpExpanded
{
    background-image: url('PanelBar/Box210Top.png');
    padding-bottom: 0px;
    background-color: #FFFFFF;
    padding-left: 0px;
    padding-right: 0px;
    color: #888888;
    padding-top: 0px;
}

div.RadPanelBar_Panel210 .rpItem .rpGroup .rpDisabled
{
    background-image: url('PanelBar/Box210Top.png');
    background-color: #ffffff;
    padding-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}

div.RadPanelBar_Panel210 .rpItem .rpGroup .rpDisabled:hover
{
    background-image: url('PanelBar/Box210Top.png');
    background-color: #ffffff;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
}

div.RadPanelBar_Panel210 .rpItem .rpGroup .rpLink .rpOut
{
    background-image: url('PanelBar/Box210Top.png');
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    margin-right: 0px;
    padding-left: 0px;
    width: 210px;
    padding-bottom: 0px;
}

div.RadPanelBar_Panel210 .rpItem .rpGroup .rpSelected .rpOut
{
    background-image: url('PanelBar/Box210Top.png');
    background-color: #ffffff;
    padding-bottom: 0px;
}

div.RadPanelBar_Panel210 .rpItem .rpGroup .rpExpanded .rpOut
{
    background-image: url('PanelBar/Box210Top.png');
    background-color: #ffffff;
    padding-bottom: 0px;
}

div.RadPanelBar_Panel210 .rpItem .rpGroup .rpLink .rpText
{
    padding-left: 0px;
    width: 210px;
    padding-bottom: 0px;
}

div.RadPanelBar_Panel210 .rpRootGroup .rpLink
{
    text-indent: 10px;
    background-image: url('PanelBar/Box210Top.png');
}

div.RadPanelBar_Panel210 .rpRootGroup .rpLink:hover
{
    background-image: url('PanelBar/Box210Top.png');
}

div.RadPanelBar_Panel210 .rpRootGroup .rpExpanded
{
    background-image: url('PanelBar/Box210Top.png');
}

div.RadPanelBar_Panel210 .rpRootGroup .rpSelected
{
    background-image: url('PanelBar/Box210Top.png');
}

div.RadPanelBar_Panel210 .rpRootGroup .rpDisabled
{
    background-image: url('PanelBar/Box210Top.png');
    text-indent: 10px;
}

div.RadPanelBar_Panel210 .rpRootGroup .rpDisabled:hover
{
    background-image: url('PanelBar/Box210Top.png');
    text-indent: 10px;
}

div.RadPanelBar_Panel210 .rpItem .rpGroup .rpLink
{
    background-image: url('PanelBar/Box210Top.png');
    padding-bottom: 0px;
}

div.RadPanelBar_Panel210 .rpItem .rpGroup .rpLink .rpOut
{
    background-image: url('PanelBar/Box210Top.png');
    padding-bottom: 0px;
}

.RadPanelBar_Panel210 .rpLevel1 .rpFirst
{
    padding-top: 0px;
    padding-bottom: 0px !important;
}
.RadPanelBar_Panel210 .rpLevel2 .rpItem
{
    padding-top: 0;
    padding-bottom: 0px !important;
}
.RadPanelBar_Panel210 .rpLevel1 .rpLast
{
    padding-top: 0px;
    padding-bottom: 0px !important;
}
.RadPanelBar_Panel210 .rpLevel2 .rpItem
{
    padding-top: 0;
    padding-bottom: 0px !important;
}

[Kamen Bundev]

Hello Karl,

Can you open a support ticket and send the whole skin along with the images and any external CSS you may have because often such issues are dependent on the page layout. A live URL would also help us reproduce the problem. Thank you in advance.

Sincerely yours,
Kamen Bundev
the Telerik team