This is a migrated thread and some comments may be shown as answers.

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

3 Answers 99 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Jark Monster
Top achievements
Rank 1
Jark Monster asked on 19 Aug 2014, 02:07 PM
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!

Code

01.@(Html.Kendo().Menu()
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.    })
29.)

3 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 20 Aug 2014, 01:08 PM
Hi Mark,

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

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mariusz
Top achievements
Rank 1
answered on 10 Feb 2015, 04:09 PM
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.
0
Iliana Dyankova
Telerik team
answered on 12 Feb 2015, 12:42 PM
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.

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Menu
Asked by
Jark Monster
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Mariusz
Top achievements
Rank 1
Share this question
or