CSS issue with with sub items in right aligned menu using Bootstrap theme

4 posts, 0 answers
  1. Jark Monster
    Jark Monster avatar
    46 posts
    Member since:
    Jan 2012

    Posted 19 Aug 2014 Link to this post

    Kendo UI Version: 2014.1.415

    The issue is that the sub-item inherits an incorrect background color and makes the contents of the sub item unreadable until the user hovers over it.  See attached images for clarification.  Below are some specifics on how to replicate the issue

    This issue occurs when
    • Using a menu with at least two layers of sub-items
    • Menu is aligned along right edge of screen so that the first layer's sub-items are forced to expand to the left instead of the right. Attached images can help clarify this.
    • Theme is set to Bootstrap.  Issue does not occur with the other themes in use in our application (BlueOpal and Black)
    • Note:  When the menu menu has enough room to expand its nested sub-items to the right, the issue does not occur.

    The attached images use the exact same source code as below.  The only difference is that one is aligned along the left side of the screen while the other is aligned along the right side.   Any help or advice you could give would be greatly appreciated!


    02.    .Name("Navigation")
    03.    .HighlightPath(false)
    04.    .Items(items =>
    05.    {
    06.        items.Add().Encoded(false).Text("<span class='fa fa-home'></span>").Action("Index", "Home");
    07.        items.Add().Encoded(false).Text("<span class='fa fa-navicon' style='padding-right:6px;'></span>Navigation")
    08.            .Items(item =>
    09.            {
    10.                item.Add().Encoded(false).Text("<span class='fa fa-desktop' style='padding-right:6px;'></span>Dashboard").Action("Index", "Dashboard");
    11.                item.Add().Encoded(false).Text("<span class='fa fa-truck' style='padding-right:6px;'></span>Shipping").Action("Index", "Test")
    12.                    .Items(ship =>
    13.                    {
    14.                        ship.Add().Encoded(false).Text("<span class='fa fa-tachometer' style='padding-right:6px;'></span>Shop").Action("Shop", "Test");
    15.                        ship.Add().Encoded(false).Text("<span class='fa fa-truck' style='padding-right:6px;'></span>Ship").Action("Index", "Test");
    16.                        ship.Add().Encoded(false).Text("<span class='fa fa-globe' style='padding-right:6px;'></span>Track").Action("Index", "Track");
    17.                    });
    18.                item.Add().Encoded(false).Text("<span class='fa fa-bar-chart-o' style='padding-right:6px;'></span>Report").Action("Index", "Reports");
    19.                item.Add().Encoded(false).Text("<span class='fa fa-wrench' style='padding-right:6px;'></span>Tools").Action("Index", "Tools")
    20.                    .Items(tool =>
    21.                    {
    22.                        tool.Add().Encoded(false).Text("<span class='fa fa-print' style='padding-right:6px;'></span>Printing").Action("Index", "Print");
    23.                        tool.Add().Encoded(false).Text("<span class='fa fa-image' style='padding-right:6px;'></span>Image Cleanup").Action("Index", "ImageCleanup");
    24.                    });
    25.                item.Add().Encoded(false).Text("<span class='fa fa-file' style='padding-right:6px;'></span>Billing").Action("Index", "Main");
    26.                item.Add().Encoded(false).Text("<span class='fa fa-cogs' style='padding-right:6px;'></span>Admin").Action("Admin", "Admin");
    27.            });
    28.    })

  2. Iliana Nikolova
    Iliana Nikolova avatar
    2570 posts

    Posted 20 Aug 2014 Link to this post

    Hi Mark,

    The following CSS rule should help to achieve the expected result: 
    .k-menu .k-state-border-right .k-link:link {
        color: #fff;

    Iliana Nikolova
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Mariusz
    Mariusz avatar
    24 posts
    Member since:
    Mar 2011

    Posted 10 Feb 2015 in reply to Iliana Nikolova Link to this post

    But the heck 'columns' menu item is once grey and once blue?!

    Same goes to submenu - if menu appears in the left items background is BLUE and if in the right it is WHITE. It's inconsistent behavior and the fix you've provided does not solve it.
  4. Iliana Nikolova
    Iliana Nikolova avatar
    2570 posts

    Posted 12 Feb 2015 Link to this post

    Hi Rafal,

    Could you please provide a dojo example which demonstrates the issue you encountered - this way I would be able to check what exactly is going wrong and provide concrete recommendations? Thank you in advance for your cooperation and time.

    Iliana Nikolova
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top