[Solved] All skins are not the same

[Ed]

Hi there,

I am finding to my cost that the particular skin I use for a given control affects whether some of the properties wor.  Is this intentional?  For example, this code from the Telerik sample web-site demonstrates the vertical scrolling facility of sub-menu items:

<telerik:RadMenu ID="RadMenu1" runat="server" Skin="Outlook">
    <Items>
        <telerik:RadMenuItem Text="Corporate">
            <GroupSettings Height="100px"></GroupSettings>
            <Items>
                <telerik:RadMenuItem Text="Mission Statement">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Strategic Plan">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Executive Bios">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Contact Us">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Careers">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Client Highlights">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="By Email">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

Changing the skin to Skin="Web20" (say) prevents the feature from working (since the scrolling indicator arrows disappear); this happens in both Firefox and IE7.  I have had a similar experience when using a scroll-bar in a RadPanelBar, although this was specific to Firefox.

It would be very handy to know when certain features were not available with certain skins -- I haven't seen any restrictions mentioned in the documentation but I might be looking in the wrong place.

Thanks,

Ed Graham

[Stuart Hemming]

Hi Ed.

FWIW, I pointed out some time ago that the skins and the way that they worked was too complex for people to guess at and suggested that they be properly documented.

At the time, IIRC, the line taken was that the skins and class names within them were sufficient to essentially make the skins self-documenting.

Sadly, if anything, the skins have become more, not less, complex and you have seen that there are some elements that are included in one that aren't in another.

If it is of any comfort at all, there do appear to be minor moves towards documenting the classes used in the skins but the help in this area is very thin.

I can't help but think that the underlying belief is that we will use the telerik provided skins out-of-the-box, or with but little in the way of customisation.


--
Stuart

[Alex Gyoshev]

Hello Ed,

There was a problem with the Menu / Web20 skin - the scrolling arrows CSS was missing and thus, they weren't rendered properly. We had been notified of the problem and fixed it, so it will be available with SP2 of RadControls for ASP.NET AJAX. Until the release, you could use the following CSS styles to work-around the problem:

.RadMenu_Web20 .rmLeftArrow,
.RadMenu_Web20 .rmRightArrow,
.RadMenu_Web20 .rmTopArrow,
.RadMenu_Web20 .rmBottomArrow,
.RadMenu_Web20 .rmLeftArrowDisabled,
.RadMenu_Web20 .rmRightArrowDisabled,
.RadMenu_Web20 .rmTopArrowDisabled,
.RadMenu_Web20 .rmBottomArrowDisabled
{
    background: #e7f1ff url(<%= Page.ClientScript.GetWebResourceUrl(RadMenu1.GetType(), "Telerik.Web.UI.Skins.Web20.Menu.left.gif") %>) center center no-repeat;
    width: 15px;
    text-decoration:none;
    text-indent:-3000px;
    color:#e7f1ff;
    overflow:hidden;
}

.RadMenu_Web20 .rmTopArrow,
.RadMenu_Web20 .rmTopArrowDisabled
{
    background-image: url(url(<%= Page.ClientScript.GetWebResourceUrl(RadMenu1.GetType(), "Telerik.Web.UI.Skins.Web20.Menu.top.gif") %>);
    width: 100%;
    height: 15px;
}

.RadMenu_Web20 .rmBottomArrow,
.RadMenu_Web20 .rmBottomArrowDisabled
{
    background-image:url(url(<%= Page.ClientScript.GetWebResourceUrl(RadMenu1.GetType(), "Telerik.Web.UI.Skins.Web20.Menu.bottom.gif") %>);
    width: 100%;
    height: 15px;
}

.RadMenu_Web20 .rmRightArrow,
.RadMenu_Web20 .rmLeftArrow
{
    height: 100%;
}

.RadMenu_Web20 .rmRightArrow,
.RadMenu_Web20 .rmRightArrowDisabled
{
    background-image: url(url(<%= Page.ClientScript.GetWebResourceUrl(RadMenu1.GetType(), "Telerik.Web.UI.Skins.Web20.Menu.right.gif") %>);
}

@Stuart: We are aware of the problem with skinning documentation; we will do our best to improve it and allow easier customization of the skins. If you want, you could provide directions of what would be the best way (for you) to learn about the class names.

Best wishes,
Alex
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Ed]

Thanks very much to Alex for the answer and Stuart for the comment.  The work-around does its job and I eagerly await the release of SP2.