jquery mobile - JQM - How to use space under thumbnail in listview -


I am using a Jquery mobile listview with a thumbnail, within this list view, there will be another list view Uses thumbnails from and it is also set as inset (external list view is not inset)

The code that I worked fine but I want to be able to use the location Under the thumbnail in the first list view, so that my internal list is visible Width is width of the screen.

Here I have JSFDell and you can see what I am trying to get:

And the code from JSFiddle is as follows: < / p>

  & lt; Ul data-roll = "list view" data-inset = "true" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; img src = "http://www.addict.co.uk/images/products/verylarge/IRON_MAN_FACE_OF_IRON_TEE_1359634428_ADMM111J_260_3.jpg" /> & Lt; H2 & gt; Broken Bell & lt; / H2 & gt; & Lt; P & gt; Broken Bell & lt; / P & gt; & Lt; / A & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; img src = "http://www.addict.co.uk/images/products/verylarge/IRON_MAN_FACE_OF_IRON_TEE_1359634428_ADMM111J_260_3.jpg" /> & Lt; H2 & gt; Warning & lt; / H2 & gt; & Lt; P & gt; Hot chip & lt; / P & gt; & Lt; / A & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; img src = "http://www.addict.co.uk/images/products/verylarge/IRON_MAN_FACE_OF_IRON_TEE_1359634428_ADMM111J_260_3.jpg" /> & Lt; H2 & gt; Wolfgang Amadeus Phoenix & lt; / H2 & gt; & Lt; P & gt; Phoenix & lt; / P & gt; & Lt; Ul data-roll = "listview" data-inset = "true" style = "width: 100%; margin-top: 50px;" & Gt; & Lt; Li & gt; & Lt; IMG src = "http://www.addict.co.uk/images/products/verylarge/IRON_MAN_FACE_OF_IRON_TEE_1359634428_ADMM111J_260_3.jpg" /> & Lt; H2 & gt; Wolfgang Amadeus Phoenix & lt; / H2 & gt; & Lt; P & gt; Phoenix & lt; / P & gt; & Lt; / li & gt; & Lt; / Ul & gt; & Lt; / A & gt; & Lt; / li & gt; & Lt; / Ul & gt;   

You can see from JSFiddle that the internal list element takes only about 75% of the space and in the external list view element is right on the thumbnail of the element, I guess JQM aligns everything like this When is a thumbnail list used in the visual element?

So my question is - is there an easy way to move internal list view elements to 100% width and outside of the list view element thumbnails are visible?

em> listview in any element, such as duration ; Otherwise, it will be converted to nested list view .

Give li element list view as a id or class , you can only Override the style of this specific element.

  & lt; li class = "custom-li" & gt; ; & Lt; Period & gt; & Lt; Ul data-roll = "list view" & gt; & Lt; Li & gt; Item & lt; / li & gt; & Lt; / Ul & gt; & Lt; / Span & gt; & Lt; / li & gt;  

Linked list view:

You only reinstall the original li < / code> link icon.

 . custom-li .ui-icon-arrow-r {top: 20%! Important;   

  • Read-only For list view:

    Remove li> of li> and then "code" padding-left Apply "direct" only child element, p and h2 ; And then restore the second ul .

     . custom-li {padding: 0; }. custom-li & gt; P, .custom-li & gt; h2 {padding-left: 100px; }. Custom-li .ui-listview {margin-top: 34px; }   



  • Comments

    Popular posts from this blog

    Verilog Error: output or inout port "Q" must be connected to a structural net expression -

    jasper reports - How to center align barcode using jasperreports and barcode4j -

    c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -