Float:right no longer working in 2022.2.510

1 Answer 78 Views
Grid Menu Styling
Bob
Top achievements
Rank 1
Iron
Bob asked on 24 May 2022, 03:41 PM

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?

1 Answer, 1 is accepted

Sort by
1
Accepted
Yanislav
Telerik team
answered on 27 May 2022, 10:39 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Bob
Top achievements
Rank 1
Iron
commented on 27 May 2022, 02:52 PM | edited

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
Telerik team
commented on 01 Jun 2022, 08:11 AM

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
Top achievements
Rank 1
Iron
commented on 02 Jun 2022, 02:42 PM

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
Telerik team
commented on 07 Jun 2022, 08:58 AM

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.

Tags
Grid Menu Styling
Asked by
Bob
Top achievements
Rank 1
Iron
Answers by
Yanislav
Telerik team
Share this question
or