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

Skin breaks multiple radpanels controls...

3 Answers 32 Views
Designs, skins, themes
This is a migrated thread and some comments may be shown as answers.
Karl
Top achievements
Rank 1
Karl asked on 19 Oct 2010, 02:35 PM
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

3 Answers, 1 is accepted

Sort by
0
Karl
Top achievements
Rank 1
answered on 19 Oct 2010, 02:37 PM
<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>
0
Karl
Top achievements
Rank 1
answered on 19 Oct 2010, 02:38 PM
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;
}
0
Kamen Bundev
Telerik team
answered on 22 Oct 2010, 03:09 PM
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
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
Designs, skins, themes
Asked by
Karl
Top achievements
Rank 1
Answers by
Karl
Top achievements
Rank 1
Kamen Bundev
Telerik team
Share this question
or