Dynamic styling of Kendo Tabstrip in Angular

3 posts, 1 answers
  1. Rob
    Rob avatar
    6 posts
    Member since:
    Oct 2017

    Posted 25 Oct 2017 Link to this post

    I'm doing something like this in my css to adjust how the tabs on the tabstrip 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-tabstrip-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 tabstrip items so that I can dynamically change things in my template or class. Any ideas?


  2. Answer
    Alex Gyoshev
    Alex Gyoshev avatar
    2527 posts

    Posted 27 Oct 2017 Link to this post

    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.

    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.
  3. Rob
    Rob avatar
    6 posts
    Member since:
    Oct 2017

    Posted 27 Oct 2017 in reply to Alex Gyoshev Link to this post

    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-tabstrip-items

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


Back to Top