Skip to content

Instantly share code, notes, and snippets.

@tbosch

tbosch/controller.js

Created February 3, 2012 11:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tbosch/1729775 to your computer and use it in GitHub Desktop.
Save tbosch/1729775 to your computer and use it in GitHub Desktop.
Download ZIP
jquery mobile bug: styling error of controlgroup when dynamically adding new checkboxes
Raw
controller.js
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");
}
Raw
main.html
<!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>
@tbosch
Copy link
Author

tbosch commented Feb 3, 2012

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();})();

@tbosch
Copy link
Author

tbosch commented Feb 3, 2012

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment