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

RadTabStrip scroll buttons disappeared

3 Answers 33 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Jeremy
Top achievements
Rank 1
Jeremy asked on 18 Nov 2014, 11:23 PM
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">

3 Answers, 1 is accepted

Sort by
0
Nencho
Telerik team
answered on 21 Nov 2014, 01:39 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Jeremy
Top achievements
Rank 1
answered on 21 Nov 2014, 09:35 PM
That worked.  Thank you.
0
MBEN
Top achievements
Rank 1
Veteran
answered on 17 Jan 2018, 11:50 PM

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>
Tags
TabStrip
Asked by
Jeremy
Top achievements
Rank 1
Answers by
Nencho
Telerik team
Jeremy
Top achievements
Rank 1
MBEN
Top achievements
Rank 1
Veteran
Share this question
or