How to move Kendo Mobile Buttongroup to next row dynamically

Question

I have a requirement where I have to show specifically three button groups in a row, and if it has more buttons then it should be moved to next row. These should happen dynamically, as the data value will be coming from the server.

Here is the sample Kendo Mobile's ButtonGroup code

<ul data-role="listview" data-type="group">
            <li>
                Default ButtonGroup
                <ul>
                    <li>
                        <ul data-role="buttongroup" data-index="0">
                            <li>One</li>
                            <li>Two</li>
                            <li>Three</li>
                            <li>Four</li>
                            <li>Five</li>
                            <li>Six</li>
                            <li>Seven</li>
                            <li>Eight</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

Here every button is added to li element. When i see this on the mobile screen, I cant see seven and eight button. Here is a screen shot of it in the following link https://i.stack.imgur.com/QBmeI.png

Therefore What I want is to restrict only to 3 buttons for a row, and the following element has to fall in the next row (next three buttons) and it should continue in the similar manner.

You can populate the DOM dynamically, creating more than one `
` — Sga, Jul 09 '15 at 13:52

score 0 · Accepted Answer · answered Jul 09 '15 at 13:59

You'll need to change the display property on the UL from display:table to display:inline-block. And then on the UL.LI you will need to change their display from display:table-cell to display:inline-block set them to float:left and width: 33%.

#ulId {
   display: inline-block !important;
   width: 100%;
}
#ulId li {
  display: inline-block;
  float: left;
  width: 33%;
}

That should get you 3 buttons wide, no matter the width of the screen, and wrap to the next line if needed.

See sample Kendo Dojo

Thanks Robin that helped. Now if the text is too long its poping out of the button instead i would like to wrap it inside the button and the alignment of the button should not be disturbed. — Shashank HS, Jul 10 '15 at 07:17

How to move Kendo Mobile Buttongroup to next row dynamically

1 Answers1