ListView within Scroller & Icons

[Florian]

Hello,

1.) i got listviews nested in buttonsgroups and i only want the lists to be scrollable (scroller) and not the entire page

<div data-role="scroller" class="scroller-content">

         <ul data-role="listview">

                <li>Webdesign</li>

                <li>Webprogrammierung</li>

                <li>Content Management Systeme</li>

                <li>Barrierefreies Webdesign</li>

                <li>Flash Programmierung</li>

                <li>Spiele Programmierung</li>

                <li>Soziale Netzwerke></li>

                <li>Usability</li>

                <li>Website Konzeption</li>

    </ul>

         

            <ul data-role="listview" style="display:none">

                <li data-icon="custom-apple">iPhone/iPad</li>

                <li data-icon="custom-android"><a>Android</a></li>

                <li data-icon="custom-mobile"><a>Handy Spiele</a></li>

                <li data-icon="custom-cart"><a>M-Commerce</a></li>       

            </ul>

         

            <ul data-role="listview" style="display:none">

                <li>Corporate Design</li>

                <li>Imagebroschüre</li>

                <li>Geschäftsbericht</li>

                <li>Flyer Design</li>

                <li>Plakat Gestaltung</li>

                <li>Bildbearbeitung</li>       

            </ul>

</div>

but as soon as the listviews are nested inside the scroller, it isnt scrollable anymore


2.) icons next to the listitems only work when <a> is set.
how to provide a simple list (items not selectable, no anchors) with icons?

thanks

[Florian]

any ideas? atleast for (2)...? :/

[Alexander Valchev]

Hello Florian,

I believe that the listview is not being scrolled in your case, because you forgot to add the height of the scroller element.
As for your second question, I suggest to add the icons via <img> tab instead of using the data-icon attribute.

For convenience you may check this jsFiddle example.
I hope this information will help you to solve the problems.

Greetings,
Alexander Valchev
the Telerik team

[Florian]

Thanks for you reply Alexander!


1) setting a height fixes the problem, BUT
1a) as i stated before, i got the listviews linked to a buttonGroup and the scrolling gets applied by all listViews, e.g. scrolling the first to the bottom and selecting the second - its content is at the bottom aswell.

2) it works with images, but is this the only way? using the data-icon attribute for list items without anchor would avoid repetitive code.
do you consider this for the next release? (to me its a fix rather than a "new feature")

[Kamen Bundev]

Hello Florian,

1. You can use the reset() method of the scroller to return it in its original position.

2. Currently this is the only way - you can also add a span with the following classes:
<span class="km-icon km-globe"></span>

We will consider supporting this out of the box in the list view for one of the next releases.

Greetings,
Kamen Bundev
the Telerik team