public
Created

jquery mobile bug: styling error of controlgroup when dynamically adding new checkboxes

  • Download Gist
controller.js
JavaScript
1 2 3 4 5 6 7
var nextId = 2;
function add() {
var group = $("#group");
nextId++;
$("#group").append('<label for="c' + nextId + '">C' + nextId + '</label><input id="c' + nextId + '" type="checkbox">');
$("#page").trigger("create");
}
main.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile test page</title>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script src="gist:text/javascript:controller.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Styling error of controlgroup when dynamically adding new items</h1>
</div>
 
<div data-role="content">
<button id="add" onclick="add()">Add item</button>
<div data-role="controlgroup" id="group">
<label for="c1">C1</label>
<input type="checkbox" id="c1">
 
</div>
</div>
</div>
 
</body>
</html>

Bookmarklet to run:

javascript:(function(){var d,main,lines,w,d2,i;d=document;function code(id){var el=d.querySelector('#file_'+id.replace('.','\\.')+' .lines .highlight');if(el){return el.innerText;}el=d.querySelector('[name="file_contents['+id+']"]');if(el){return el.value;}alert("could not find file "+id);throw"could not find file "+id;}main=code('main.html');main=main.replace(/"gist:([^:]+):([^"]*)"/,function(_,type,id){return'"data:'+type+';charset=utf8,'+encodeURI(code(id))+'"';});w=window.open('','gist_preview');d2=w.document;lines=main.split('\n');d2.open();for(i=0;i<lines.length;i++){d2.writeln(lines[i].replace(/^\s+|\s+$/g,''));}d2.close();})();

Seems like the controlgroup plugin does not remove the ui-corner-bottom css classes when new items are added.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.