IE11 & Chrome Issues with Kendo.Menu

6 posts, 0 answers
  1. David
    David avatar
    7 posts
    Member since:
    Aug 2006

    Posted 12 May 2015 Link to this post

    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"]));
                              });
                      })
                    )

  2. David
    David avatar
    7 posts
    Member since:
    Aug 2006

    Posted 12 May 2015 Link to this post

    Picture added.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. David
    David avatar
    7 posts
    Member since:
    Aug 2006

    Posted 12 May 2015 Link to this post

    We just upgraded Kendo.UI to 2015.1.429 and have the same issue with Chrome as with the older version.  
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 14 May 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. David
    David avatar
    7 posts
    Member since:
    Aug 2006

    Posted 14 May 2015 in reply to Iliana Nikolova Link to this post

    You are awesome.  That was exactly what our issue is.  We have to look over the Site.css file and review where the issue is now.  Thanks for your help. :)
  7. David
    David avatar
    7 posts
    Member since:
    Aug 2006

    Posted 14 May 2015 Link to this post

    To follow up and explain a little more what happened.  When we created the MVC site, Microsoft added in a CSS section called "menu" that had formatting for a menu item.  All I had to do is delete the CSS section relating to menu and that cleaned up the Chrome formatting issue and formatted the site correctly.   
Back to Top
UI for ASP.NET MVC is VS 2017 Ready