Dynamic styling of Kendo Tabstrip in Angular

[Rob]

I'm doing something like this in my css to adjust how the tabs on the render:

.k-tabstrip-items {
align-self: left;
background-color: green;
margin-top: 8px;
margin-bottom: 8px;
height: 32px;
border: 1px solid black !important;
width: 70% !important;
margin-left: 5%;
}

But I need to dynamically adjust the margin so sometimes the tabstrip is centered and sometimes it has the margin above.

So I want to conditionally add something like this:

.k--items-addon {
margin-right: auto;
margin-left: auto;
}

I don't see anything in the API that allows me to pass a class for the  items so that I can dynamically change things in my template or class. Any ideas?

 

[Alex Gyoshev]

Hello Rob,

You can apply this styling by setting the class to the TabStrip component and using cascaded styles. Note that these styles need to be global (not encapsulated), either through ViewEncapsulation.None, the ::ng-deep selector, or simply placed in an external stylesheet. See this plunker snippet for an example.

If you wish to keep the border below the tabs that spans the complete tabstrip width, use justify-content: center instead of setting margins. Alternative plunker.

Regards,
Alex Gyoshev
Progress Telerik

[Rob]

Thanks, I've been using "encapsulation: ViewEncapsulation.None" to get through the encapsulation, but it didn't occur to me to set a class high up and then use that to narrow the focus lower down in the styles. I had to tweak the selection to:

.align-center > .k--items

as the "::ng-deep kendo-tabstrip.align-center > .k--items" one did not select it.

 

[Brad]

The supplied plunkers are not working. I need to change the style of my tabstrip items based on if the form in the tab is valid or not. So, trying to do something like [class.alert-danger]="!accountForm.valid" but this doesn't seem to have any effect. The class 'alert-danger' is defined in an external stylesheet.

Any advice? 

[Dimiter Topalov]

Hello Brad,

The Plunker demos are rather outdated, but moving the component code and styling to a working Stackblitz demo seems to produce working examples:

https://stackblitz.com/edit/angular-aas7m5?file=app/app.component.ts

It is worth mentioning that the alignment of the tabs can now be controlled via a built-in configuration option:

https://www.telerik.com/kendo-angular-ui/components/layout/tabstrip/tabs/#toc-alignment

I am not sure how the desired behavior of applying a style to the tabs dynamically is related to the tabs positioning previously described in this thread, but you can achieve this by utilizing the cssClass option to bind a class to the tab dynamically, e.g.:

https://stackblitz.com/edit/angular-xmbqqc-x2vggo?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik