Angular2 + Kendo MultiSelect list each item per row

2 posts, 0 answers
  1. yamaha
    yamaha avatar
    6 posts
    Member since:
    Sep 2015

    Posted 11 Jul Link to this post

    I have an Angular2 Kendo MultiSelect componenet in my app. My business requirement is to list each selection per row instead of stacking them next to each other. How do I achieve this?
    I did a search and found this thread. Implemented the proposed style by setting width to 100px but this would not work in my scenario because the multiselect selections are going to be longer than 100px.
    One way that I found this to work with my multiselect is by setting width to 500px for the multiselect control. In that case it is dropping each item in its own row but the size of the multiselect is not taking the full width of the page.
    How can i achieve each item per row with Kendo Multiselect length set to full width ?
  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    628 posts

    Posted 13 Jul Link to this post

    Hi,

    You can customize the built-in styling as follows to achieve the desired layout:

    styles: [`
        >>> li.k-button {
          clear: left;
        }
         
        >>> ul.k-reset {
          overflow: hidden;
        }
      `]

    http://plnkr.co/edit/tW2Hebi5t7KTaH600stZ?p=preview

    I hope this helps.

    Regards,
    Dimiter Topalov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top