Question

I am trying to use the Telerik MVC Menu control (as a button bar), but can’t seem to be able to set the width to auto-generate. What I mean is, the menu continues to the end of the DIV. I would like the menu to only be as wide as the sum of the button widths. Actually, the Telerik demo is doing the same thing as my menu is doing:

http://demos.telerik.com/aspnet-mvc/razor/menu/sitemapbinding
(Look at how the menu continues on to the right of “Other product lines”).

Here is my menu:

    @{ Html.Telerik().Menu()
            .Name("case-history-button-menu")
            .ClientEvents(events => events.OnSelect("onCaseHistoryMenuBarSelect"))
            .Items(menu =>
            {
                menu.Add()
                    .Text("Add a Response").HtmlAttributes(new { id = "cases-history-addresponse" } ); @*Sets the ID HTML attribute so we can access it *@
                menu.Add()
                    .Text("Add a Comment").HtmlAttributes(new { id = "cases-history-button-addcomment" }); ;
                menu.Add()
                    .Text("Back to Cases").HtmlAttributes(new { id = "cases-history-button-back" }); ;
            })
            .Render();
    }

I do realize that I could just hard code my width … but as I add or remove buttons (programatically) I want the menu to resize.

Answer 1

The Telerik MVC menu is rendered as an <UL> element. The latter has block display by default which means it occupies all the available space. You can override the display to “inline-block” and then the menu should be sized as you need it to:

   @{ Html.Telerik().Menu()
            .Name("case-history-button-menu")
            // set the display to inline-block
            .HtmlAttributes( new { style = "display: inline-block" } )
    }

Have in mind though that older versions of IE won’t accept inline-block display. You may need “inline” if you must support older IEs.