In the attached image, we are having issues with the menu bar and spacing between the sub menu's. We are currently running Kendo.UI 2013.2.918. Do the newer versions of Kendo fix this "bug" or is there an fix that we can do with our current version? The screen print is from Chrome version 42.0.2311.135
Code:
@(Html.Kendo().Menu()
.Name("Menu")
.HtmlAttributes(new { @style = "width:99%;border: 0px;"})
.Direction(MenuDirection.Bottom)
.Items(items =>
{
items.Add().Text("home").Action("Index", "Home").ImageUrl(Url.Content("~/Images/B-home%2048.png")).ImageHtmlAttributes(new { style = "width:25px" });
items.Add().Text("search").Action("Index", "Search").ImageUrl(Url.Content("~/Images/B-search%2048.png")).ImageHtmlAttributes(new { style = "width:25px" });
items.Add().Text("activities & alerts").ImageUrl(Url.Content("~/Images/B-Activity%2048.png")).HtmlAttributes(new { style = "width:175px" }).ImageHtmlAttributes(new { style = "width:25px" }).Items(children =>
{
children.Add().Text("bins").Items(binNode =>
{
binNode.Add().Text("central processing unit").Action("Index", "ActivityPage", new { BinID = "1" });
binNode.Add().Text("charge off").Action("Index", "ActivityPage", new { BinID = "7" });
binNode.Add().Text("collateral cashier").Action("Index", "ActivityPage", new { BinID = "9" });
binNode.Add().Text("defensive action").Action("Index", "ActivityPage", new { BinID = "4" });
binNode.Add().Text("delinquency").Action("Index", "ActivityPage", new { BinID = "2" });
binNode.Add().Text("foreclosure / reo").Action("Index", "ActivityPage", new { BinID = "6" });
binNode.Add().Text("legal / bankruptcy").Action("Index", "ActivityPage", new { BinID = "3" });
binNode.Add().Text("office automation assistant").Action("Index", "ActivityPage", new { BinID = "8" });
binNode.Add().Text("settlement").Action("Index", "ActivityPage", new { BinID = "5" });
}).HtmlAttributes(new { style = "width:175px" });
children.Add().Text("my").Items(my =>
{
my.Add().Text("activities").Action("Index", "ActivityMyPage").HtmlAttributes(new { style = "width:175px" });
my.Add().Text("alerts").Action("Index", "Alerts", new { Mine = true });
}).HtmlAttributes(new { style = "width:175px" });
children.Add().Text("office").Items(office =>
{
office.Add().Text("actities").Action("Index", "ActivityPage", new { BinID = "0" }).HtmlAttributes(new { style = "width:175px" });
office.Add().Text("alerts").Action("Index", "Alerts");
}).HtmlAttributes(new { style = "width:175px" });
});
items.Add().Text("reports & portfolios").ImageUrl(Url.Content("~/Images/B-reports%2048.png")).HtmlAttributes(new { style = "width:190px" }).ImageHtmlAttributes(new { style = "width:25px" }).Items(children =>
{
children.Add().Text("reports").Items(sibling1 =>
{
sibling1.Add().Text("my activity report").Action("Index", "StaffMetrics");
sibling1.Add().Text("office activity report").Action("Index", "OfficeMetrics");
}).HtmlAttributes(new { style = "width:190px" });
children.Add().Text("portfolios").Items(sibling2 =>
{
sibling2.Add().Text("office portfolio").Action("Index", "Reports_OfficeLoan");
sibling2.Add().Text("litigation portfolio").Action("Index", "Reports_Litigation", new { status = "true" });
});
children.Add().Text("statisitics").Visible(@Convert.ToBoolean(Session["isManagement"].ToString())).Items(sibling3 =>
{
sibling3.Add().Text("staff report").Action("Index", "ManagerStaffReport");
sibling3.Add().Text("role process report").Action("Index", "RoleMetrics");
});
});
items.Add().Text("admin").ImageUrl(Url.Content("~/Images/B-admin%2048.png")).HtmlAttributes(new { style = "width:100px" }).ImageHtmlAttributes(new { style = "width:25px" }).Items(children =>
{
children.Add().Text("staff").Action("Index", "AdminStaff").HtmlAttributes(new { style = "width:100px" });
children.Add().Text("database").Action("Index", "AdminDatabase").Visible(@Convert.ToBoolean(Session["AdminDatabase"]));
children.Add().Text("website").Action("Index", "AdminWebsite").Visible(@Convert.ToBoolean(Session["AdminWebsite"]));
});
})
)
5 Answers, 1 is accepted
Rank 1
Rank 1
Hi David,
I believe this issue is styling related - most probably there are some custom CSS rules which influence the default menu rendering. Could you please try removing all other styles (leaving only the Kendo UI ones) and let me know if the issue still persists?
Regards,Iliana Nikolova
Telerik
Rank 1
Rank 1