Dynamic styling of Kendo Tabstrip in Angular

5 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
    Admin
    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.

    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.
  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.

     

  4. Brad
    Brad avatar
    6 posts
    Member since:
    Nov 2017

    Posted 28 Jun 2019 in reply to Alex Gyoshev Link to this post

    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? 

  5. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1285 posts

    Posted 02 Jul 2019 Link to this post

    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.
Back to Top