Can someone tell me how I can align my last element to the right while the others stay to the left please? i am working with asp.net mvc core 8
@(Html.Kendo().Menu()
.Name("Menu")
.Items(items =>
{
items.Add().Text("Mis promociones").Action("Index", "Index", new { area = "" });
items.Add().Text("Crear promoción").Action("Create", "Index", new { area = "" });
items.Add().Text("Acerca de").Action("About", "Index", new { q = KitSecurity.EncryptQueryString("FolioName=789") });
items.Add().Text("Contacto").Action("Contact", "Index", new { q = KitSecurity.EncryptQueryString("FOLIO_ID=456456") });
items.Add().Text("Nombre de usuario").HtmlAttributes(new { @class = "ultimo-elemento" }).Items(subItems =>
{
subItems.Add().Text("Otros tramites").Url("https://localhost:44379");
subItems.Add().Text("Cerrar Sesión").Action("CerrarSesion", "Index", new { area = "" });
});
})
)
1 Answer, 1 is accepted
0
Accepted
Hi Eduardo,
Thank you for the code snippet and the details provided.
In order to achieve the desired behavior, I would recommend adding a custom class for the last item and using the following CSS:
<style>
.k-menu.main-menu {
display: flex;
justify-content: flex-start;
width: 100%;
padding: 0;
}
.k-menu.main-menu .rightElement {
margin-left: auto;
}
.k-menu.main-menu .k-menu-group {
display: block;
}
</style>@(Html.Kendo().Menu()
.Name("Menu")
.HtmlAttributes(new { @class = "main-menu" }) // Add a custom class here
.Items(items =>
{
items.Add().Text("Mis promociones");
items.Add().Text("Crear promoción");
items.Add().Text("Acerca de");
items.Add().Text("Contacto");
items.Add().Text("Nombre de usuario").HtmlAttributes(new { @class = "rightElement" }).Items(subItems =>
{
subItems.Add().Text("Otros tramites");
subItems.Add().Text("Cerrar Sesión");
});
})
)Feel free to make the needed tests on your side and let me know if this achieves the desired result.
Kind Regards,
Anton Mironov
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.