Skip to content

kb(tabstrip): Add KB for dotted outline #2701

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 14, 2025
Merged

kb(tabstrip): Add KB for dotted outline #2701

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions knowledge-base/tabstrip-customize-selected-tab-border-blazor.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,6 @@ else

## See Also

* [Telerik TabStrip Overview](https://docs.telerik.com/blazor-ui/components/tabstrip/overview)
* [Remove Dotted Tab Outline](slug://tabstrip-kb-remove-dotted-outline)
* [Override the Theme or Apply Custom CSS Styles](slug://themes-override)
* [Telerik TabStrip Tabs Configuration](https://docs.telerik.com/blazor-ui/components/tabstrip/tabs-configuration)
* [Override the Theme or Apply Custom CSS Styles](slug://themes-override)
69 changes: 69 additions & 0 deletions knowledge-base/tabstrip-remove-dotted-outline.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
---
title: Remove Dotted Outline of Focused TabStrip Tab
description: Learn how to remove the dotted outline that appears on Telerik TabStrip tabs when focused or clicked.
type: how-to
page_title: How to Remove Dotted Outline of Focused TabStrip Tab
slug: tabstrip-kb-remove-dotted-outline
tags: telerik, blazor, tabstrip, css, styles
ticketid: 1675627, 1644688, 1558648, 1577788, 1539971, 1533822, 1509800
res_type: kb
---

## Environment

<table>
<tbody>
<tr>
<td>Product</td>
<td>TabStrip for Blazor</td>
</tr>
</tbody>
</table>

## Description

This KB article answers the following questions:

* How to remove the dotted line around the TabStrip tab content when focus is set on the tab?
* How to hide the border for selected tab that appears after click?
* How to get rid of TabStrip borders outlines on click, active, and focus?
* How to prevent selection of the TabStrip content `<div>`?
* How to supress the darker dashed border that appears when you click inside the Tab Strip?
* How can I control the appearance of the Telerik Blazor TabStrip tabs?

## Solution

The focus outline of TabStrip tabs is an accessibility feature. The example below shows to how to remove it, but this is not recommended. Instead, consider using different custom focus styles.

1. Set the TabStrip `Class` parameter to a custom CSS class.
1. Use the custom class to apply an `outline-style:none` or `outline:none` style to the `div.k-tabstrip-content` children of the TabStrip element.

>caption Remove TabStrip tab dotted outline

````RAZOR
<TelerikTabStrip @bind-ActiveTabIndex="@TabStripActiveTabIndex"
Class="no-outline">
<TabStripTab Title="Tab 1">
Tab 1 Content
</TabStripTab>
<TabStripTab Title="Tab 2">
Tab 2 Content
</TabStripTab>
</TelerikTabStrip>

<style>
div.no-outline > .k-tabstrip-content:focus {
outline-style: none;
}
</style>

@code {
private int TabStripActiveTabIndex { get; set; }
}
````

## See Also

* [Customize Selected Tab Shadow](slug://tabstrip-customize-selected-tab-border-blazor)
* [TabStrip Overview](slug://components/tabstrip/overview)
* [Override Theme Styles](slug://themes-override)
Loading