listview put serveral widgets in a li

[fang]

 i want to put serveral widgets in a li ,  serveral widget in one line ,  multi lines in a listview, but i find  something wrong with it , is it my configure not right? for exmaple, only the first switch can be seen,the second is invisiable,  and the squence of widgets are not same as code below

<div data-role="view" id="foo"  data-title="trest1">
   <ul data-role="listview"  >
      <li>
            <span>test</span>
            <input id="slider" class="balSlider" value="0" />
            <a data-role="button">Foo</a>
            <input type="checkbox" data-role="switch" />
            <a data-role="button">Foo</a>
            <input type="checkbox" data-role="switch" />
      <li>
             <a data-role="button">Foo</a>
             <a data-role="button">Foo</a>
            <input type="checkbox" data-role="switch" />
            <a data-role="button">Foo</a>
            <input type="checkbox" data-role="switch" />
      </li>
 </ul>

[Iliana Dyankova]

Hi King,

Thank you for the runnable example. I believe the issue with Switch widgets is caused by the absolute position which is set by default (i.e. all of the Switch controls in a particular list item аrе rendered, however they are one over another). Hence in order to show all of the Switch widgets you should override the default styling. As an example: 

$("#switch1").parent().css('right', '120px');

Also, in the provided configuration I observed invalid HTML - there are some unclosed <LI> tags.
 
Regards,
Iliana Nikolova
the Telerik team