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

Bootstrap 4 + UI for ASP .NET MVC

5 Answers 196 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Kyle
Top achievements
Rank 2
Veteran
Kyle asked on 07 Feb 2018, 09:59 PM

Version: 2018.1.117

I've been trying to use the SASS Theme Builder, Bootstrap 4, and the MVC HTML Helpers to generate a very simple menu.  (I'm starting to wonder if Bootstrap 4 is actually supported by UI for ASP .NET MVC properly.)

Version: 2018.1.117

When the menu renders, it puts the k-state-highlight class on my first text item, but that class does not exist in my two .files (bootstrap.min.css and all.css, downloaded from the SASS Theme Builder).  I'm noticing numerous of these classes are missing from these CSS files.

Html.Kendo().Menu()

    .Name("Menu")
.Items(items =>
                              {
                                  items.Add().ImageUrl("~/Content/about.png").ImageHtmlAttributes(new {style="width:50%;"});
                                  items.Add().Text("Home").Action("Index", "Default").Selected(true);
                                  items.Add().Text("Help").Action("Index", "Help", new { area = "HelpPage" });
                                  items.Add().Text("Disabled item").Enabled(false);
                              }).Deferred()

 

Am I missing a CSS file or am I missing the point?  Can someone guide me in the right direction, please?

5 Answers, 1 is accepted

Sort by
0
Ivan Zhekov
Telerik team
answered on 09 Feb 2018, 08:45 AM
Hi, Kyle.

The highlight class is used to denote the item in the menu that responds to the current URL (if any) and is added from HightlightPath feature of menu, tabstrip, panelbar and similar components.

As for the reason it's missing, the sass themes differ a bit from the less themes. Within the themes, there is no notion of highlighted item. I will run it trough our designers and see if we can validate it as a new feature.

Regards,
Ivan Zhekov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Kyle
Top achievements
Rank 2
Veteran
answered on 09 Feb 2018, 01:39 PM

Yeah, I've noticed that the SASS themes differ quite a bit from the LESS themes.

Sadly, because of this, I'm having to use more bootstrap 4 than Kendo for the layout objects and will try to use Kendo for things like grid, etc.

0
Magdalena
Telerik team
answered on 13 Feb 2018, 08:35 AM
Hello Kyle,

When kendo menu item is selected, it receives "k-state-selected" class name, not "k-state-highlight". I have downloaded a custom theme from the Theme Builder application, based on the Bootstrap theme, and it works properly on my side. The selected item is styled by the following:
.k-state-selected {
    color: #ffffff;
    background-color: #168f32;
    border-color: #0e5a1f;
}

If the item is not highlighted on our side, it is possible that some other additional CSS rule overwrite this one, or the theme is not applied. Could you please inspect the ".k-item.k-state-selected" menu element, if the style is applied, but overwritten? Looking forward to your reply.

Regards,
Magdalena
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Kyle
Top achievements
Rank 2
Veteran
answered on 02 Mar 2018, 05:05 PM

Here's something interesting.

If I set .Selected(true) on my static URL to http://google.com, it works properly.  If I set .Selected(true) to my first Action("Index", "Default"), it doesn't select it.  What's the internal logic?

 

Kendo Menu Good.png:

@(Html.Kendo().Menu()
    .Name("Menu")
    .Items(items =>
    {
        items.Add().ImageUrl("~/Content/images/about.png").ImageHtmlAttributes(new {style="width:50%;"});
        items.Add().Text("Home").Action("Index", "Default");
        items.Add().Text("Help").Url("http://google.com").Selected(true);
        items.Add().Text("Disabled item").Enabled(false);
    }).Deferred())

 

Kendo Menu Bad.png:

@(Html.Kendo().Menu()
    .Name("Menu")
    .Items(items =>
    {
        items.Add().ImageUrl("~/Content/images/gimmal.png").ImageHtmlAttributes(new {style="width:50%;"});
        items.Add().Text("Home").Action("Index", "Default").Selected(true);
        items.Add().Text("Help").Url("http://google.com");
        items.Add().Text("Disabled item").Enabled(false);
    }).Deferred())

 

Please also take note in my screenshots that there is indeed a k-state-highlight class.

0
Magdalena
Telerik team
answered on 06 Mar 2018, 08:47 AM
Hi Kyle,

Thank you for the clarification of the scenario. The k-state-highlight class is added to an item that points to the current URL. It is different from selecting an item. Actually this item cannot be selected. If you would like the highlighted item has the same layout as selected item, you can add its selector. For example if the rule of selected item is the following:
.k-state-selected {
    color: #ffffff;
    background-color: #168f32;
    border-color: #0e5a1f;
}

the new CSS rule will be:
.k-state-selected,
.k-state-highlight {
    color: #ffffff;
    background-color: #168f32;
    border-color: #0e5a1f;
}

Do not hesitate to contact us if you have other questions.


Regards,
Magdalena
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Kyle
Top achievements
Rank 2
Veteran
Answers by
Ivan Zhekov
Telerik team
Kyle
Top achievements
Rank 2
Veteran
Magdalena
Telerik team
Share this question
or