ButtonGroup overflow

[Erik]

Is there a way to setup overflow on a ButtonGroup?

 

<div class="demo-section k-content"  >
  
            
                @(Html.Kendo().ButtonGroup()
                .Name("DashboardNavigate-select")
                .HtmlAttributes(new { style = "  display:" + displayToolbar + ";    " })

                        .Items(t =>
                    {
                      foreach (KeyValuePair<string, string>     kvp in Model.ButtonList)
                    {
                        
                              t.Add().Text(kvp.Value).HtmlAttributes(new { datavalue = kvp.Key.ToString() });
                         
                    }

                        })
                 .Events(events => events.Select("buttonNavigateNew"))

                )
              
</div>

[Ivan Danchev]

Hello Erik,

You will have to override default styles, in order to apply overflow to the ButtonGroup. For example:

<style>  
  #DashboardNavigate-select {
    width: 150px;
    overflow-x: auto;
    display: inline-block;
    margin: 0px;
  }
  
  .k-button-group .k-button {
    margin-right: -4px;
  }
</style>

With the CSS above, if the combined width of the buttons exceeds the specified width value, a scrollbar will appear: screenshot.

Regards,
Ivan Danchev
Progress Telerik