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

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