JQuery Mobile automatically adds & nbsp

Question

I have this code using jQuery Mobile:

<div role="main" class="ui-content"> <form action="/" method="post"> <fieldset data-role="controlgroup"> <input type="checkbox" name="checkbox-1a" id="checkbox-1a" checked=""> <label for="checkbox-1a">Cheetos</label> <input type="checkbox" name="checkbox-2a" id="checkbox-2a"> <label for="checkbox-2a">Doritos</label> <input type="checkbox" name="checkbox-3a" id="checkbox-3a"> <label for="checkbox-3a">Fritos</label> <input type="checkbox" name="checkbox-4a" id="checkbox-4a"> <label for="checkbox-4a">Sun Chips</label> </fieldset> </form> </div> 

The problem is that when the page loads, the codes look like this:

 <div class="ui-controlgroup-controls "> &nbsp;&nbsp;&nbsp;&nbsp; <div class="ui-checkbox"> 

I missed all the code, the problem is

   

which should not be there. Any idea on how to fix it?

Answer 1

This problem occurs when copying and pasting source code from their site.

In fact, this way you also copy invisible spaces, which in the browser are converted to   and block the last block.

To solve the problem, just remove all the spaces between the tags and everything will display correctly.

Answer 2

There are many ways to remove auto-complete by default.

First

 <div style="padding: 0;">...</div> 

Second: Define identifier for div tag and set padding to 0 in css

 <div id="myID"> #myID{ padding:0; }