How to align/float the toolbar button

[Winnie]

<div id="toolbar"></div>

<script>
$("#toolbar").kendoToolBar({
items: [
{ type: "button", text: "foo", imageUrl: "foo.png" },
{ type: "button", text: "bar", imageUrl: "bar.png" },
{ type: "button", text: "baz", imageUrl: "baz.png" }
]
});
</script>

In the above example, I would like to 
1. Change the image of foo button to the right but keep the image of bar and baz button to the left
2. Float bar and baz button to right but foo button to left

Thanks so much for your help.

[Alexander Valchev]

Hi Winnie,

Please check the following example as it demonstrates how this can be achieved.
   - http://dojo.telerik.com/EFeFi

Regards,
Alexander Valchev
Telerik

 

 

[Winnie]

Thanks Alexander

[Nathan]

Is there any way to do this with a 'template' item?

I've tried the recommended solution and while it works for things like buttons, I can't get it to work with a template even if my css class includes float: right.

I think it's because my template is being wrapped inside a div created by Kendo:

<div data-uid="5d10ddc6-b4c9-4e2d-bf32-634897d3851b" data-overflow="never" style="visibility: visible;" class="ng-scope">

<div class="search">
  <button kendo-button="" class="search-icon k-button k-button-icon" icon=""search"" data-role="button" role="button" aria-disabled="false" tabindex="0">
  <span class="k-icon k-i-search"></span></button><input class="search-input" type="text" placeholder="Search">
</div>

</div>

{
  template:
  "<div class='search'>" +
   "<kendo-button class='search-icon' icon='\"search\"'></kendo-button>" +
   "<input class='search-input' type='text' placeholder='Search'>" +
   "</div>",
  attributes: { style: "float: right" }
},

[Alexander Valchev]

Hi Nathan,

Your observation is correct. The template content is wrapped by the ToolBar widget.
Currently the attributes options are not applied when there is a template because we assume that the developer will write them directly in the template. In your scenario however the float should be applied to the wrapper.

We will change the behaviour - the attributes options will be set to the template wrapper (for items that have a template). The fix will be published in the next internal build which should be uploaded at the end of the week.

Regards,
Alexander Valchev
Telerik

 

 

[Hannah]

When adding a few more buttons on the left side to the example above and then adjusting the browser width, the right-float buttons fall out of the grey toolbar background. What is a good way to fix this?

http://dojo.telerik.com/EFeFi/10

[Petyo]

Hello Hannah,

the behavior you describe is the default browser one when it comes to floated elements - they do not stretch the container. You may try any of the suggestions provided by this google search.

Regards,
Petyo
Telerik