New to Kendo UI for jQuery? Download free 30-day trial

Display ButtonGroup On Multiple Rows

Environment

Product ButtonGroup for Progress® Kendo UI®

Description

How can I display the buttons in the ButtonGroup on multiple rows?

Solution

Use the flex property to change the rendering of the buttons in the ButtonGroup.

    <style>
      #select-period{
        display: flex;
        flex-flow: row wrap;
        align-content: flex-start;
        height: 180px;
        width: 420px;
      }
      .k-button-group .k-button+.k-button {
        margin: 0;
      }
      .k-button {
        flex: 21%;
      }
      .firstLeftRadius {
        border-top-left-radius: 4px !important;
        border-bottom-left-radius: 0px !important;
      }    
      .firstRightRadius {
        border-top-right-radius: 4px !important;
      }    
      .lastLeftRadius {
        border-bottom-left-radius: 4px !important;
      }
      .lastRightRadius {
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 4px !important;
      }
    </style>
    <div id="example">
      <div class="demo-section k-content">
        <div id="select-period">
          <span class="firstLeftRadius">
            1 @
          </span>
          <span>
            2abc
          </span>
          <span>
            3def
          </span>
          <span class="firstRightRadius">
            Up
          </span>
          <span>
            4 ghi
          </span>
          <span>
            5 jkl
          </span>
          <span>
            6 mno
          </span>
          <span>
            Down
          </span>
          <span>
            7 pqrs
          </span>
          <span>
            8 tuv
          </span>
          <span>
            9 wxyz
          </span>
          <span>
            Left
          </span>
          <span class="lastLeftRadius">
            Cancel
          </span>
          <span>
            0 (space)
          </span>
          <span>
            Enter
          </span>
          <span class="lastRightRadius">
            Right
          </span>
        </div>
      </div>
    </div>

    <script>
      $(function() {
        $("#select-period").kendoButtonGroup();
      });
    </script>

See Also

In this article
Not finding the help you need? Improve this article