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

Dynamic styling of Kendo Tabstrip in Angular

4 Answers 680 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Rob
Top achievements
Rank 1
Rob asked on 25 Oct 2017, 04:00 PM

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?

 

4 Answers, 1 is accepted

Sort by
0
Accepted
Alex Gyoshev
Telerik team
answered on 27 Oct 2017, 05:17 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Rob
Top achievements
Rank 1
answered on 27 Oct 2017, 04:24 PM

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.

 

0
Brad
Top achievements
Rank 1
answered on 28 Jun 2019, 04:02 PM

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? 

0
Dimiter Topalov
Telerik team
answered on 02 Jul 2019, 08:54 AM
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
Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Charts
Asked by
Rob
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Rob
Top achievements
Rank 1
Brad
Top achievements
Rank 1
Dimiter Topalov
Telerik team
Share this question
or