Check out the jsFiddle link. The issue arises when the Result screen is set to the width of a mobile's screen. Instead of wrapping the text, it gets replaced by dots and cannot be scrolled to view the full content.
Here is the code snippet:
<a href="#popupNested" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-info ui-btn-icon-left ui-btn-b" data-transition="slidedown">Info</a>
<div data-role="popup" id="popupNested" data-theme="none">
<div data-role="collapsibleset" data-theme="b" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0;">
<div data-role="collapsible" data-inset="false">
<h2>Must save</h2>
<ul data-role="listview" data-icon="false">
<li><a href="#" data-rel="dialog">If you don't save, changes won't apply!</a></li>
</ul>
</div><!-- /collapsible -->
</div><!-- /collapsible set -->
</div><!-- /popup -->
In an attempt to resolve this issue, I tried using
data-mode="reflow" class="ui-responsive table-stroke"
, inspired by a solution for tables, but it was unsuccessful. Can anyone provide guidance on how to fix this problem?