Fill Remaining Space in Toolbar

[Cody]

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?

[Petar]

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 - https://stackblitz.com/edit/angular-vzisym?file=app/app.component.ts

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.

Regards,
Petar
Progress Telerik