Float:right no longer working in 2022.2.510

[Bob]

This is kendo ui for asp.net mvc.  In the past I have used float:right to move menu items and gridtoolbar items to the right side, but that no longer works.  For example:

.ToolBar(toolbar =>
{
   toolbar.Search();
   toolbar.Custom()
      .Text("Clear Filters/View All")
      .Url("#")
      .HtmlAttributes(new { id = "btnClearFilters", @class="btn btn-link", onclick = "btnClearFiltersClick()" });
   toolbar.Custom()
      .Text("New Order")
      .Url("#")
      .IconClass("k-icon k-i-add")
      .HtmlAttributes(new { id = "btnNew", style = "float:right;", onclick = "btnNewClick()" });
   toolbar.Custom()
      .Text("Copy Order")
      .Url("#")
      .IconClass("k-icon k-i-copy")
      .HtmlAttributes(new { id = "btnCopy", style = "float:right;margin-right:20px;", onclick = "btnCopyClick()", disabled = "disabled" });
})

The "New Order" and "Copy Order" buttons should be on the far right of the toolbar, but all of the toolbar items appear on the left side.  Is there a new way to right align items?

[Yanislav]

Hello Bob,

I recommend you try to change the 'display' property value of the toolbar to 'block'.

Thus the float:right property should work correctly.

I hope this helps. 

Regards,
Yanislav
Progress Telerik

[Bob]

That worked for the toolbar, however, the menu still won't allow right alignment of items, and using display:block doesn't fix it. 

[Yanislav]

Hello Bob,

About the Menu component, you could try to modify the styles of the items as follows:

<style>
    li.k-item:nth-child(2) {
        margin-left: auto !important;
        order: 2;
    }
</style>

By using the proper selector, you could select the items that should be displayed on the right part of the screen and change their order. Thus those items would be displayed after the other ones and the margin-left:auto configuration should move them to the right.

Here is an example: https://netcorerepl.telerik.com/wGEgkvas10vowFvK14

I hope this helps.  

[Bob]

For anyone who finds this later and wants to move multiple items to the right side of the menu, the "margin-left:auto !important" css declaration is only necessary on the first item.  Then each subsequent item only needs the order declaration.  I did these inside the HTML attributes of the individual menu items: 

items.Add().SpriteCssClasses("k-icon k-i-gear colored-icon").HtmlAttributes(new { style = "order:3;" })

[Yanislav]

Hello, Bob

Thank you for sharing the solution you've found with the community. It will surely help someone who is working on a similar to your scenario.