My app requires a clickable "table". I got the closest list in combination with the viewer and grid Using the link. For the example given below, what do I want (a clickable tabularo and a different button on the right) My problem is that I can not line "body-column" with "header-title" because "table body "In the Button grid offset.
& lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Title & gt; Test & lt; / Title & gt; & Lt; Meta name = "viewport" content = "width = device-width" /> & Lt; Link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" /> & Lt; Script src = "http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js" & gt; & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div data-role = "page" id = "index" & gt; & Lt; Ul data-roll = "listview" data-partition-icon = "gear" data-inset = "true" & gt; & Lt; Li data-role = "list-split" & gt; & Lt; Div class = "ui-grid-d" & gt; & Lt; Div class = "ui-block-a" & gt; TRK & lt; / Div & gt; & Lt; Div class = "ui-block-b" & gt; STATUS & lt; / Div & gt; & Lt; Div class = "ui-block-c" & gt; NR & lt; / Div & gt; & Lt; Div class = "ui-block-d" & gt; PFIX & lt; / Div & gt; & Lt; Div class = "ui-block-e" & gt; EHNR & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "select #" class = "ui-grid-d" & gt; & Lt; Div class = "ui-block-a" & gt; TRUCK1 & lt; / Div & gt; & Lt; Div class = "ui-block-b" & gt; 123 & lt; / Div & gt; & Lt; Div class = "ui-block-c" & gt; ABC 123 & lt; / Div & gt; & Lt; Div class = "ui-block-d" & gt; 456 & lt; / Div & gt; & Lt; Div class = "ui-block-e" & gt; 78 9 & lt; / Div & gt; & Lt; / A & gt; & Lt; A href = "# Description" data-inline = "true" data-transition = "slide" & gt; Details & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;
Just add the correct padding to divide the list to match:
.ui-li-divider {padding-right: 56px! Important; } 
Comments
Post a Comment