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

RadTabStrip Tab width with Align=Justify

1 Answer 437 Views

TabStrip

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

Glenn asked on 10 Aug 2020, 09:20 PM

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,

1 Answer, 1 is accepted

answered on 13 Aug 2020, 03:27 PM

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:

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

Regards,
Attila Antal
Progress Telerik