Response title
This is preview!
Responsive grids not stacking.. page refresh required?
in jQuery Mobile
•
3 months ago
Using JQM 1.3 cannot get the Responsive grids to stack without refreshing the page one time?
- According to the docs, they "include a single breakpoint “preset” in the structural CSS that we hope will be useful in a fair amount of typical situations. This breakpoint is applied by adding a class like
ui-responsive to the widget markup to opt into the breakpoint."- In my code below I reference that class called ui-responsive, but it is not stacking the data on the iPhone or desktp?
<div data-role="page" data-add-back-btn="true">
<div data-role="header">
<h1>Provision Tickets <cfoutput>(#rsTickets.recordcount#)</cfoutput></h1>
<a href="t0.cfm" class="ui-btn-right" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div>
<div data-role="content">
<ul data-role="listview" data-filter="true">
<cfoutput query="rsTickets" group="tDt">
<li data-role="list-divider">
#rsTickets.tDt#
</li>
<cfoutput>
<div class="ui-grid-d my-breakpoint ui-responsive">
<div class="ui-block-a"><div class="ui-body ui-body-b"><a href="t2.cfm?id=#rsTickets.ttNum#&id2=#rsTickets.tac#">#rsTickets.Customer#</a></div></div>
<div class="ui-block-b"><div class="ui-body ui-body-d">#ttcustAddress# <br><strong>#ttcity#</strong></div></div>
<div class="ui-block-c"><div class="ui-body ui-body-d"><strong>#st#</strong><a href="acceptq.cfm?id1=#rsTickets.ow#&id2=#URLEncodedFormat(rsTickets.Customer2)#&id=#rsTickets.ttNum#&id5=#rsTickets.tac#" rel="external" title="Click here to Accept this Ticket"> #ow#</a> <strong>#pf# </strong><a href="getLatLong1.cfm?id2=#rsTickets.ttNum#" title="Click here to view/save Lat/Long Coordinates">Geo</a><br>Created by:#ttf# </div></div>
<div class="ui-block-d"><div class="ui-body ui-body-d"><strong>#tt#</strong><br>
Due Date:#tDu#</div></div>
<div class="ui-block-e"><div class="ui-body ui-body-d"><img src="../images/#rsTickets.esc#.png" alt="" width="23" height="23" align="absmiddle" /> #te# </div></div>
</div>
</cfoutput>
</cfoutput>
</ul>
</div>
<div data-role="footer">
<cfinclude template="../footer_date_logo.cfm">
</div>
</div>
</body>
</html>
1
