Skip to content

Instantly share code, notes, and snippets.

@lyzadanger

lyzadanger/ios5_label.html

Created October 14, 2011 23:17
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 lyzadanger/1288656 to your computer and use it in GitHub Desktop.
Save lyzadanger/1288656 to your computer and use it in GitHub Desktop.
Download ZIP
jQueryMobile Label Alignment on iOS5
Raw
ios5_label.html
<!DOCTYPE html>
<html>
<head>
<title>The Tartanator</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page" id="tartan-maker">
<div data-role="header" data-position="fixed">
<h1>Tartan Builder</h1>
</div><!-- /header -->
<div data-role="content">
<form id="tartanator_form">
<ul data-role="listview" id="tartanator_form_list">
<li data-role="list-divider">Tell us about your tartan</li>
<li data-role="fieldcontain">
<label for="tartan_name">Tartan Name</label>
<input type="text" name="name" id="tartan_name" placeholder="Tartan Name" />
</li>
<li data-role="fieldcontain">
<label for="tartan_info">Tartan Info</label>
<textarea cols="40" rows="8" name="tartan_info" id="tartan_info" placeholder="Optional tartan description or info"></textarea>
</li>
<li data-role="list-divider">Build your colors</li>
<li class="colorset">
<div data-role="fieldcontain" class="color-input">
<label class="select" for="color-0">Color</label>
<select name="colors[]" id="color-0" >
<option value="">Select a Color</option>
<option value="#000000">Black</option>
<option value="#ffffff">White</option>
<option value="#cccccc">Light Grey</option>
<option value="#999999">Mid Grey</option>
<option value="#666666">Dark Grey</option>
<option value="#333333">Very Dark Grey</option>
<option value="#cc0000">Red</option>
<option value="#660000">Dark Red</option>
<option value="#FFB6C1">Light Rose</option>
<option value="#ff3344">Rose</option>
<option value="#FF8C00">Orange</option>
<option value="#FFD700">Gold</option>
<option value="#ffec00">Yellow</option>
<option value="#9ACD32">Yellow Green</option>
<option value="#5b6333">Olive</option>
<option value="#00cc00">Light Green</option>
<option value="#546c18">Field Green</option>
<option value="#8FBC8F">Light Grey Green</option>
<option value="#008000">Green</option>
<option value="#126846">Blue Green</option>
<option value="#B0E0E6">Light Blue</option>
<option value="#274086">Blue</option>
<option value="#56565e">Storm Blue Grey</option>
<option value="#3c516c">Dark Slate Blue</option>
<option value="#001144">Dark Blue</option>
<option value="#29292b">Very Dark Blue</option>
<option value="#4B0082">Indigo</option>
<option value="#8A2BE2">Blue Violet</option>
<option value="#65295f">Purple</option>
<option value="#cc9966">Light Tan</option>
<option value="#996600">Tan</option>
<option value="#615024">Welsh Earth</option>
<option value="#663300">Brown</option>
</select>
</div>
<div data-role="fieldcontain" class="size-input">
<label for="size-0">Stitch Count</label>
<input id="size-0" type="range" min="2" step="2" max="72" autocomplete="off" name="sizes[]" value="2" />
</div>
</li>
<li class="colorset">
<div data-role="fieldcontain" class="color-input">
<label class="select" for="color-1">Color</label>
<select name="colors[]" id="color-1" >
<option value="">Select a Color</option>
<option value="#000000">Black</option>
<option value="#ffffff">White</option>
<option value="#cccccc">Light Grey</option>
<option value="#999999">Mid Grey</option>
<option value="#666666">Dark Grey</option>
<option value="#333333">Very Dark Grey</option>
<option value="#cc0000">Red</option>
<option value="#660000">Dark Red</option>
<option value="#FFB6C1">Light Rose</option>
<option value="#ff3344">Rose</option>
<option value="#FF8C00">Orange</option>
<option value="#FFD700">Gold</option>
<option value="#ffec00">Yellow</option>
<option value="#9ACD32">Yellow Green</option>
<option value="#5b6333">Olive</option>
<option value="#00cc00">Light Green</option>
<option value="#546c18">Field Green</option>
<option value="#8FBC8F">Light Grey Green</option>
<option value="#008000">Green</option>
<option value="#126846">Blue Green</option>
<option value="#B0E0E6">Light Blue</option>
<option value="#274086">Blue</option>
<option value="#56565e">Storm Blue Grey</option>
<option value="#3c516c">Dark Slate Blue</option>
<option value="#001144">Dark Blue</option>
<option value="#29292b">Very Dark Blue</option>
<option value="#4B0082">Indigo</option>
<option value="#8A2BE2">Blue Violet</option>
<option value="#65295f">Purple</option>
<option value="#cc9966">Light Tan</option>
<option value="#996600">Tan</option>
<option value="#615024">Welsh Earth</option>
<option value="#663300">Brown</option>
</select>
</div>
<div data-role="fieldcontain" class="size-input">
<label for="size-1">Stitch Count</label>
<input id="size-1" type="range" min="2" step="2" max="72" autocomplete="off" name="sizes[]" value="2" />
</div>
</li>
<li class="colorset">
<div data-role="fieldcontain" class="color-input">
<label class="select" for="color-2">Color</label>
<select name="colors[]" id="color-2" >
<option value="">Select a Color</option>
<option value="#000000">Black</option>
<option value="#ffffff">White</option>
<option value="#cccccc">Light Grey</option>
<option value="#999999">Mid Grey</option>
<option value="#666666">Dark Grey</option>
<option value="#333333">Very Dark Grey</option>
<option value="#cc0000">Red</option>
<option value="#660000">Dark Red</option>
<option value="#FFB6C1">Light Rose</option>
<option value="#ff3344">Rose</option>
<option value="#FF8C00">Orange</option>
<option value="#FFD700">Gold</option>
<option value="#ffec00">Yellow</option>
<option value="#9ACD32">Yellow Green</option>
<option value="#5b6333">Olive</option>
<option value="#00cc00">Light Green</option>
<option value="#546c18">Field Green</option>
<option value="#8FBC8F">Light Grey Green</option>
<option value="#008000">Green</option>
<option value="#126846">Blue Green</option>
<option value="#B0E0E6">Light Blue</option>
<option value="#274086">Blue</option>
<option value="#56565e">Storm Blue Grey</option>
<option value="#3c516c">Dark Slate Blue</option>
<option value="#001144">Dark Blue</option>
<option value="#29292b">Very Dark Blue</option>
<option value="#4B0082">Indigo</option>
<option value="#8A2BE2">Blue Violet</option>
<option value="#65295f">Purple</option>
<option value="#cc9966">Light Tan</option>
<option value="#996600">Tan</option>
<option value="#615024">Welsh Earth</option>
<option value="#663300">Brown</option>
</select>
</div>
<div data-role="fieldcontain" class="size-input">
<label for="size-2">Stitch Count</label>
<input id="size-2" type="range" min="2" step="2" max="72" autocomplete="off" name="sizes[]" value="2" />
</div>
</li>
<li class="colorset">
<div data-role="fieldcontain" class="color-input">
<label class="select" for="color-3">Color</label>
<select name="colors[]" id="color-3" >
<option value="">Select a Color</option>
<option value="#000000">Black</option>
<option value="#ffffff">White</option>
<option value="#cccccc">Light Grey</option>
<option value="#999999">Mid Grey</option>
<option value="#666666">Dark Grey</option>
<option value="#333333">Very Dark Grey</option>
<option value="#cc0000">Red</option>
<option value="#660000">Dark Red</option>
<option value="#FFB6C1">Light Rose</option>
<option value="#ff3344">Rose</option>
<option value="#FF8C00">Orange</option>
<option value="#FFD700">Gold</option>
<option value="#ffec00">Yellow</option>
<option value="#9ACD32">Yellow Green</option>
<option value="#5b6333">Olive</option>
<option value="#00cc00">Light Green</option>
<option value="#546c18">Field Green</option>
<option value="#8FBC8F">Light Grey Green</option>
<option value="#008000">Green</option>
<option value="#126846">Blue Green</option>
<option value="#B0E0E6">Light Blue</option>
<option value="#274086">Blue</option>
<option value="#56565e">Storm Blue Grey</option>
<option value="#3c516c">Dark Slate Blue</option>
<option value="#001144">Dark Blue</option>
<option value="#29292b">Very Dark Blue</option>
<option value="#4B0082">Indigo</option>
<option value="#8A2BE2">Blue Violet</option>
<option value="#65295f">Purple</option>
<option value="#cc9966">Light Tan</option>
<option value="#996600">Tan</option>
<option value="#615024">Welsh Earth</option>
<option value="#663300">Brown</option>
</select>
</div>
<div data-role="fieldcontain" class="size-input">
<label for="size-3">Stitch Count</label>
<input id="size-3" type="range" min="2" step="2" max="72" autocomplete="off" name="sizes[]" value="2" />
</div>
</li>
<li class="colorset">
<div data-role="fieldcontain" class="color-input">
<label class="select" for="color-4">Color</label>
<select name="colors[]" id="color-4" >
<option value="">Select a Color</option>
<option value="#000000">Black</option>
<option value="#ffffff">White</option>
<option value="#cccccc">Light Grey</option>
<option value="#999999">Mid Grey</option>
<option value="#666666">Dark Grey</option>
<option value="#333333">Very Dark Grey</option>
<option value="#cc0000">Red</option>
<option value="#660000">Dark Red</option>
<option value="#FFB6C1">Light Rose</option>
<option value="#ff3344">Rose</option>
<option value="#FF8C00">Orange</option>
<option value="#FFD700">Gold</option>
<option value="#ffec00">Yellow</option>
<option value="#9ACD32">Yellow Green</option>
<option value="#5b6333">Olive</option>
<option value="#00cc00">Light Green</option>
<option value="#546c18">Field Green</option>
<option value="#8FBC8F">Light Grey Green</option>
<option value="#008000">Green</option>
<option value="#126846">Blue Green</option>
<option value="#B0E0E6">Light Blue</option>
<option value="#274086">Blue</option>
<option value="#56565e">Storm Blue Grey</option>
<option value="#3c516c">Dark Slate Blue</option>
<option value="#001144">Dark Blue</option>
<option value="#29292b">Very Dark Blue</option>
<option value="#4B0082">Indigo</option>
<option value="#8A2BE2">Blue Violet</option>
<option value="#65295f">Purple</option>
<option value="#cc9966">Light Tan</option>
<option value="#996600">Tan</option>
<option value="#615024">Welsh Earth</option>
<option value="#663300">Brown</option>
</select>
</div>
<div data-role="fieldcontain" class="size-input">
<label for="size-4">Stitch Count</label>
<input id="size-4" type="range" min="2" step="2" max="72" autocomplete="off" name="sizes[]" value="2" />
</div>
</li>
<li class="colorset">
<div data-role="fieldcontain" class="color-input">
<label class="select" for="color-5">Color</label>
<select name="colors[]" id="color-5" >
<option value="">Select a Color</option>
<option value="#000000">Black</option>
<option value="#ffffff">White</option>
<option value="#cccccc">Light Grey</option>
<option value="#999999">Mid Grey</option>
<option value="#666666">Dark Grey</option>
<option value="#333333">Very Dark Grey</option>
<option value="#cc0000">Red</option>
<option value="#660000">Dark Red</option>
<option value="#FFB6C1">Light Rose</option>
<option value="#ff3344">Rose</option>
<option value="#FF8C00">Orange</option>
<option value="#FFD700">Gold</option>
<option value="#ffec00">Yellow</option>
<option value="#9ACD32">Yellow Green</option>
<option value="#5b6333">Olive</option>
<option value="#00cc00">Light Green</option>
<option value="#546c18">Field Green</option>
<option value="#8FBC8F">Light Grey Green</option>
<option value="#008000">Green</option>
<option value="#126846">Blue Green</option>
<option value="#B0E0E6">Light Blue</option>
<option value="#274086">Blue</option>
<option value="#56565e">Storm Blue Grey</option>
<option value="#3c516c">Dark Slate Blue</option>
<option value="#001144">Dark Blue</option>
<option value="#29292b">Very Dark Blue</option>
<option value="#4B0082">Indigo</option>
<option value="#8A2BE2">Blue Violet</option>
<option value="#65295f">Purple</option>
<option value="#cc9966">Light Tan</option>
<option value="#996600">Tan</option>
<option value="#615024">Welsh Earth</option>
<option value="#663300">Brown</option>
</select>
</div>
<div data-role="fieldcontain" class="size-input">
<label for="size-5">Stitch Count</label>
<input id="size-5" type="range" min="2" step="2" max="72" autocomplete="off" name="sizes[]" value="2" />
</div>
</li>
</ul>
<div data-role="fieldcontain">
<input type="submit" name="buildtartan" id="buildtartan" value="Make it!" data-role="button" />
</div>
</form>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="index.html" data-icon="info">About</a></li>
<li><a href="findevent.html" data-icon="star">Events</a></li>
<li><a href="tartans.html" data-icon="grid" class="ui-btn-active">Tartans</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment