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
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.
)