Skin breaks multiple radpanels controls...

4 posts, 0 answers
  1. Karl
    Karl avatar
    172 posts
    Member since:
    Sep 2010

    Posted 19 Oct 2010 Link to this post

    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
  2. Karl
    Karl avatar
    172 posts
    Member since:
    Sep 2010

    Posted 19 Oct 2010 Link to this post

    <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>
  3. Karl
    Karl avatar
    172 posts
    Member since:
    Sep 2010

    Posted 19 Oct 2010 Link to this post

    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;
    }
  4. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 22 Oct 2010 Link to this post

    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
Back to Top