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

Menu subitem expand icon is off the pop-up and hard to see

1 Answer 81 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Jay
Top achievements
Rank 1
Jay asked on 06 Jan 2021, 04:55 PM

I'm working on replacing a standard asp.net menu with RadMenu. I used this to come up with something I think I can live with on the desktop and mobile:

https://docs.telerik.com/devtools/aspnet-ajax/controls/menu/how-to/auto-height-of-mobile-radmenu-items-group-popup?_ga=2.68372561.1121007008.1609881912-1221423875.1609164691

The auto height fixes the scroll bar issue, but in mobile render, the expand icon is so far over it is off the background for the pop-up. They are very light in color and once they are off the pop-up background, really hard to see.

See attached image.

If I could get this fixed, I think I could live with this setup. Thanks.

And for the record, searching the documentation for this subject doesn't turn up much.

 

 

 

1 Answer, 1 is accepted

Sort by
0
Doncho
Telerik team
answered on 08 Jan 2021, 03:16 PM

Hi Jay,

You can set the width of the menu slide to be to "auto" to make the menu items more narrow, and have the expand button closer to the item text:

CSS

html .RadMenuPopup .rmItem .rmLink {
    width: auto;
}
However, if there are sub-items with longer names you may want to dynamically resize the slide width similar to the way its height is being resized in the sample in the Auto height of Mobile RadMenu items group popup article.

Here is a sample modification of the JavaScript code suggested in the auto height article linked above:

function ExpandOpenedItem(sender, args) {
    var rmGroup = args.get_item().get_childListElement();
    setSlideSize(rmGroup);
}

function ExpandClosedItem(sender, args) {
    var rmGroup = $(args.get_item().get_element()).parent();

    setSlideSize(rmGroup);
}

function setSlideSize(rmGroup) {
    var $rmGroup = $(rmGroup);
    var $slide = $rmGroup.closest(".rmSlide");

    //set height
    var rmGroupHeight = $rmGroup.height();
    $slide.height(rmGroupHeight);
    $slide.css("max-height", rmGroupHeight)

    //set width
    var $items = $rmGroup.find('.rmLink');
    //get the max width of all items
    var maxWidth = $items[0].offsetWidth;
    $items.each(function () {
        if (this.offsetWidth > maxWidth) maxWidth = this.offsetWidth
    });
    //get the width of the expand button
    var btnWidth = $(".rmToggle")[0].offsetWidth;
    //set the result max width to the slide
    $slide.width(maxWidth + btnWidth);
}

As for the color, it seems to be a result of custom styling. You can use the Browser's DevTools() and inspect the currently applied styles and try to define which style is resulting in the non expected color. The first two points in the Improve Your Debugging Skills with Chrome DevTools blog post may help you with that.

Please let me know if any questions remain.

Kind regards,
Doncho
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Menu
Asked by
Jay
Top achievements
Rank 1
Answers by
Doncho
Telerik team
Share this question
or