Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
jquery mobile bug: styling error of controlgroup when dynamically adding new checkboxes
var nextId = 2;
function add() {
var group = $("#group");
$("#group").append('<label for="c' + nextId + '">C' + nextId + '</label><input id="c' + nextId + '" type="checkbox">');
<!DOCTYPE html>
<title>jQuery Mobile test page</title>
<link href="" rel="stylesheet" type="text/css"/>
<script src=""></script>
<script src=""></script>
<script src="gist:text/javascript:controller.js"></script>
<div data-role="page" id="page">
<div data-role="header">
<h1>Styling error of controlgroup when dynamically adding new items</h1>
<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">

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))+'"';});'','gist_preview');d2=w.document;lines=main.split('\n');;for(i=0;i<lines.length;i++){d2.writeln(lines[i].replace(/^\s+|\s+$/g,''));}d2.close();})();

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