Fill Remaining Space in Toolbar

2 posts, 1 answers
  1. Cody
    Cody avatar
    4 posts
    Member since:
    Mar 2020

    Posted 14 Apr Link to this post

    I'm switching over from material to this product, and in material if you want to separate components from left, and right side you could use flex. e.g. .fill-remaining-space { flex: 1 1 auto; }   apply this class to a span and it will push any elements after this to the right. Is there something similar we can use in kendo toolbar?
  2. Answer
    Petar avatar
    20 posts

    Posted 15 Apr Link to this post

    Hi Cody,

    It is possible to align tools inside <kendo-toolbar> to the right but there is a caveat(I have explained about it few lines below). Here is a sample StackBlitz demonstrating the desired behaviour -

    The are two key points in the above example:

    1. The encapsulation for the component has to be set to ViewEncapsulation.None
    2. margin-left: auto has to be set to the tool which has to be aligned to the right. Note the selector kendo-toolbar-renderer is used and not the one used when defining the markup:
      .k-toolbar kendo-toolbar-renderer:nth-child(4) { /* select whichever position is needed */
              margin-left: auto;

    The thing to keep in mind is that this approach will not work when the toolbar is responsive, i.e. when [overflow]="true". This is due to some technical limitations of the current implementation of the toolbar.

    I hope this helps. Please don't hesitate to get back to me if further assistance is needed.

    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top