This is a migrated thread and some comments may be shown as answers.
Fill Remaining Space in Toolbar
1 Answer 16 Views
This is a migrated thread and some comments may be shown as answers.
Cody
Top achievements
Rank 1
Cody asked on 14 Apr 2020, 05:44 PM
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?

1 Answer, 1 is accepted

Sort by
0
Accepted
Petar
Telerik team
answered on 15 Apr 2020, 10:13 AM

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

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.
Asked by
Cody
Top achievements
Rank 1
Answers by
Petar
Telerik team
Share this question
or