RadTabStrip scroll buttons disappeared

[Jeremy]

I am dynamically creating tabs in a RadTabStrip.  Everything was working wonderfully until I started styling the tabs.  I had to remove the default skin (skin="") to style the tabs the way I want.  But now the scroll buttons are gone.  I haven't found any documentation on how to bring them back or style them.

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="PartyHistorysPages" Skin="" Width="100%" ScrollChildren="true" ScrollButtonsPosition="Right" OnTabClick="RadTabStrip1_TabClick">

[Nencho]

Hello Jeremy,

Thank you for contacting Telerik Support.

Indeed, once you configure the skin in the demonstrated way - none is applied and this is the reason for the missing background image of the scroll buttons. However, you could apply custom styles for the buttons in questions, using the rtsPrevArrow and rtsNextArrow selectors. Please consider the below example :

  html .RadTabStrip .rtsPrevArrow,
html .RadTabStrip .rtsNextArrow {
           border: 1px solid black;
           background: rgba(255,0,0,.5);
           margin-top: 0;
       }

Hope this information helps. I will be glad to assist you any further.

​
Regards,
Nencho
Telerik

 

 

[Jeremy]

That worked.  Thank you.

[MBEN]

I have a similar situation where the scrollbars don't show for me. I have EnableEmbeddedSkins set to false.

Also adding the custom css for my code:

.RadTabStrip {
    border-bottom: 5px solid #3c3d5e;
    margin: 15px 0 18px;
}

    .RadTabStrip .rtsGhostTab {
        border-color: #767676;
        color: black;
        background-color: #f9f9f9;
    }

    .RadTabStrip .rtsUL {
        margin: 0;
        padding: 0;
        text-align: center;
    }

    .RadTabStrip .rtsLI {
        color: #FFF;
        display: inline;
        margin: 0 2px;
        padding: 0;
    }

    .RadTabStrip .rtsLevel1 .rtsLI {
        color: #ffffff;
    }

    .RadTabStrip .rtsLink {
        padding: 5px 8px;
        color: #767676;
        color: #fff;
        background: #536ba2;
        font-weight: 500;
        text-wrap: normal;
    }

        .RadTabStrip .rtsLink:hover {
            background: #3c3d5e;
        }

    .RadTabStrip .rtsLevel1 .rtsLink {
        display: inline-block;
    }

    .RadTabStrip .rtsSelected {
        background: #eae9e6;
        color: #3c3d5e;
    }

    .RadTabStrip .rtsLevel1 .rtsSelected {
        background: #eae9e6;
    }

    .RadTabStrip .rtsDisabled,
    .RadTabStrip .rtsDisabled:hover {
        background: #536ba2;
        color: #eae9e6;
    }

    .RadTabStrip .rtsLevel .rtsOut,
    .RadTabStrip .rtsLevel .rtsIn,
    .RadTabStrip .rtsLevel .rtsTxt {
        padding: 0;
    }

    .RadTabStrip .rtsScroll {
        height: auto;
        width: 1600px !important;
    }

.RadTabStripTop .rtsLevel1 {
    /*background-color: #25a0da;*/
}

    .RadTabStripTop .rtsLevel1 .rtsUL {
        padding: 5px;
        padding-bottom: 0;
    }

.RadTabStripBottom .rtsLevel1 .rtsUL {
    padding: 5px;
    padding-top: 0;
}

.RadTabStripTop .rtsUL .rtsLI,
.RadTabStripBottom .rtsUL .rtsLI {
    padding: 0 0 0 1px;
}

.RadTabStripTop .rtsUL .rtsFirst,
.RadTabStripBottom .rtsUL .rtsFirst {
    padding: 0 0 0 1px;
}

.RadTabStrip_disabled .rtsTxt {
    -ms-filter: "alpha(opacity=60)";
    filter: alpha(opacity=60);
}

.RadTabStrip_disabled .rtsLevel1 .rtsLink {
    color: #91CAE8;
    cursor: default;
}

    .RadTabStrip_disabled .rtsLevel1 .rtsLink:hover {
        border-color: transparent;
    }

.RadTabStrip .rtsPrevArrow,
.RadTabStrip .rtsNextArrow {
    border: 1px solid black;
    background: rgba(255,0,0,.5);
    margin-top: 0;
}

<telerik:RadTabStrip ID="rtsPlans" Width="100%" runat="server" MultiPageID="rmpPlans"
  SelectedIndex="0" ScrollChildren="true" PerTabScrolling="true" ScrollButtonsPosition="Middle">
</telerik:RadTabStrip>

<telerik:RadMultiPage ID="rmpPlans" runat="server" SelectedIndex="0">
</telerik:RadMultiPage>