Afternoon,

I've attached a picture for it describes the problem best. After clicking on a tab item (Blazor UI) there is a "focus rectangle" around the tab. How can I make sure that this rectangle never shows, that is, clicking on the tab should simply select the tab and not paint the rectangle. To my surprise the following didn't work:

::deep .k-active:active{
    outline: none !important;
}
::deep .k-active:focus{
    outline: none !important;
}

I'm trying to add styling to a specific tabstrip content (e.g. removing the padding). But I can't seem to figure out a way to select the specific tabstrip content.

This code:

<TelerikTabStrip>

    <TabStripTab Title="General Info" Class="tab-pane-general-info">
         <div class="general-info"></div>
    </TabStripTab>

    <TabStripTab Title="Summary" Class="tab-pane-product-list">
        <div class="product-list"></div>
     </TabStripTab>

</TelerikTabStrip>

Results in the following HTML:

I don't have a way to identify the different tab contents.

I know I can select on the div I created (.general-info), but I want to remove the padding from the k-tabstrip-content for a specific tab.

Any ideas?

Hey there!

I'm not the greatest when it comes to editing the CSS in your components. Can you help me figure out how to change the text color on the Tab Stip? My default color is Red, but I would like to change that to grey so it looks less like a warning or an alert.  I pasted an example from your demo site. I'd like to change what is currently blue. Thanks in advance for any assistance!!

Hey,

I'm trying to build an edit screen for some rather complicated data. The data is complicated enough that putting the entire form on one page is quite unwieldy, so I decided to move parts of it to different tabs. Easier said than done apparently, because I'm running into an issue.

It looks like there is an issue when nesting FormItems within a TabStripTab. Here's a code sample to reproduce the issue;

<TelerikForm Model="@_model" OnValidSubmit="HandleValidSubmit">
    <FormItems>
        <TelerikTabStrip PersistTabContent="true">
            <TabStripTab Title="Tab 1">
                <FormItem Field="@nameof(_model.GenericLvl1)" LabelText="Generic lvl 1" />
            </TabStripTab>
            <TabStripTab Title="Tab 2">
                <FormItem Field="@nameof(_model.GenericLvl2)" LabelText="Generic lvl 2" />
                <FormItem Field="@nameof(_model.GenericLvl3)" LabelText="Generic lvl 3" />
            </TabStripTab>
        </TelerikTabStrip>
    </FormItems>
    <FormButtons>
        <TelerikButton ButtonType="ButtonType.Submit" ThemeColor="primary">Submit</TelerikButton>
        <TelerikButton ButtonType="ButtonType.Button" OnClick="Cancel">Cancel</TelerikButton>
    </FormButtons>
</TelerikForm>

When executed, this sample will render the following;

It appears the Generic lvl 2 field is being rendered outside of the TabStripTab. The tab itself appears empty, with the form fields it's supposed to contain appearing underneath it.

Clicking on Tab 2 then causes the fields it's supposed to contain to be placed underneath the field from Tab 1;

The fields from Tab 2 don't disappear when you click on Tab 1; they will stick around until the page is refreshed. This doesn't happen when PersistTabContent is disabled; the fields will still appear to be outside of the tab, but they do disappear when the tab is closed.

From my testing it seems that the moment a component is wrapped within a FormItem, it will be rendered outside of the tab it's supposed to be in. As another example, given this tab;

<TabStripTab Title="Tab 1">
    <FormItem>
        <Template>
            <TelerikTextBox @bind-Value=_model.GenericLvl1 Placeholder="Within FormItem"/>
        </Template>
    </FormItem>
    <TelerikTextBox @bind-Value=_model.GenericLvl2 Placeholder="Outside FormItem"/>
</TabStripTab>

I would expect both text boxes to appear in order and to be visually identical (except for the placeholder text). What actually happens is this;

It's admittedly been a few years since I last worked with Blazor and I've never used the Telerik UI components before, so perhaps I'm misunderstanding or overlooking something here. But to me this looks like a bug in the library.

Does anyone know why this happens? Is there a solution?

The content area of my tabs have grid controls on them. I have them configured to go to a detail page when a row is double clicked.

When the detail page comes up I lose the tab strip.  

Is there a strategy or technique for keeping the tabstrip at the top even when navigating from grid to a detail page?

Hi Team,

I am using Telerik Blazor with 3.4.0 version with same base code as https://docs.telerik.com/blazor-ui/knowledge-base/tabstrip-remove-tab.

I am seeing below error while closing tabs. could you please assist for same. Note (i don't see this error when i use 3.2.0)