Note that there are some explanatory texts on larger screens.

plurals
  1. PODynamic content only partially styled in JQuery Mobile/Phonegap
    primarykey
    data
    text
    <p>I have a JQuery Mobile/Phonegap app. After dynamically inserting the html form elements I call <code>.trigger('create')</code> on the containing element, like so:</p> <pre><code>$('div#response-form').append(formHtmlString).trigger('create'); </code></pre> <p>All the elements are correctly styled except the radio buttons and check boxes, which are only partially styled and also not properly aligned. See attached image below:</p> <p><img src="https://i.stack.imgur.com/lkqBS.jpg" alt="Dynamic form in JQuery Mobile"></p> <p>What on earth am I doing wrong?</p> <p>Thanks!</p> <p><strong>Edit</strong></p> <p>This is the HTML code contained in the <code>formHTMLString</code> variable:</p> <pre><code>&lt;form data-response_id="API1201344135246"&gt; &lt;div data-page="1"&gt; &lt;h3&gt;Page One&lt;/h3&gt; &lt;/div&gt; &lt;div data-role="fieldcontain"&gt; &lt;fieldset data-role="controlgroup"&gt; &lt;legend&gt;Question - Checkbox*&lt;/legend&gt; &lt;input type="checkbox" name="10010" id="10010" value="One" class="custom" /&gt; &lt;label for="10010"&gt;One&lt;/label&gt; &lt;input type="checkbox" name="10011" id="10011" value="Two" class="custom" /&gt; &lt;label for="10011"&gt;Two&lt;/label&gt; &lt;input type="checkbox" name="10012" id="10012" value="Three" class="custom" /&gt; &lt;label for="10012"&gt;Three&lt;/label&gt; &lt;/fieldset&gt; &lt;/div&gt; &lt;div data-role="fieldcontain"&gt; &lt;label for="2"&gt;Question - String*&lt;/label&gt; &lt;input type="text" name="2" id="2" value="" /&gt; &lt;/div&gt; &lt;div data-role="fieldcontain"&gt; &lt;fieldset data-role="controlgroup"&gt; &lt;legend&gt;Question - Radio Button&lt;/legend&gt; &lt;input type="radio" name="6" id="10004" value="Yes" /&gt; &lt;label for="10004"&gt;Yes&lt;/label&gt; &lt;input type="radio" name="6" id="10005" value="No" /&gt; &lt;label for="10005"&gt;No&lt;/label&gt; &lt;input type="radio" name="6" id="10006" value="Maybe" /&gt; &lt;label for="10006"&gt;Maybe&lt;/label&gt; &lt;/fieldset&gt; &lt;/div&gt; .... &lt;/form&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload