RadTabStrip Tab width with Align=Justify

[Glenn]

Hi all,

I cannot get the tabs to be the same width, even if I specify the width.  Also, the tab control does not fill the strip until the browser is resized.  Sadly I cannot provide screenshots but the tabs do not fill the entire strip as it leaves some of the strip bare.

 

 

 

 

UI:

            <telerik:RadTabStrip runat="server" ID="rts" Width="100%" AutoPostBack="False" 
                Skin="Silk" MultiPageID="rmp" SelectedIndex="0" 
                CausesValidation="False" Align="Justify"
                OnClientTabSelected="OnClientTabSelected" EnableAriaSupport="True" RenderMode="Classic">
                <KeyboardNavigationSettings CommandKey="Alt" FocusKey="T" />
                <Tabs>
                    <telerik:RadTab Text="Text" PageViewID="pv1" Value="pv1" Selected="True"></telerik:RadTab>
                    <telerik:RadTab Text="Some Text" PageViewID="pv2" Value="pv2"></telerik:RadTab>
                    <telerik:RadTab Text="Some More TextView" PageViewID="pv3" Value="pv3"></telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>

 

CSS:

        .RadTabStrip_Silk .rtsLevel1 .rtsLink,
        .RadTabStrip_Silk .rtsLevel1 .rtsLink:hover,
        .RadTabStrip_Silk .rtsLevel1 .rtsSelected:hover {
            background-color: blue !important;
            color: white !important;
            background-image: none !important;
        }

        .RadTabStrip_Silk .rtsLevel1 .rtsSelected {
            background-color: red !important;
            color: white !important;
            text-align: center;
            background-image: none !important;
        }

 

Thanks,

[Attila Antal]

Hi Glenn,

If you would like to apply custom styles, you will need to use your own CSS. By enabling the Align property, the TabStrip will execute a built-in JavaScript logic that will automatically apply dimensions to the List items. In the following short video, you can see the results if you are manipulating the styles on your own: http://somup.com/cYjIob6A0I

Here is an example CSS style to override the built-in styles and Remove the Align property and add the following CSS style to the page:

html body .RadTabStrip_Silk .rtsUL {
    display: flex;
    width: 100%;
    justify-content: center;
}

html body .RadTabStrip_Silk .rtsLevel1 .rtsLI {
    display: inline-block;
    min-width: 200px;
}

 

To be able to overrule CSS styles in general, I highly recommend reviewing the articles below:

Open the browser's developer tools, inspect the targeted elements, its styles, and using the developer tools play around with the CSS rules. For more information, you can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post explaining how to inspect the generated HTML and check the applied styles for various elements. 

Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;

To learn more about CSS styling and using the Browser's developer tools, you may find the following videos useful: 

• How to Use the Chrome Inspector to Edit Your Website CSS - contains a Video
• Get Started With Viewing And Changing CSS
• Chrome Developer Tools Tutorial - Inspect and Test CSS 2019 - video
• Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools - video
• Testing CSS Styles with Chrome Inspector Tool - video

Regards,
Attila Antal
Progress Telerik