Skip to content

Instantly share code, notes, and snippets.

@kapilgarg1996

kapilgarg1996/index.html

Created March 22, 2015 14:46
Show Gist options
  • Save kapilgarg1996/c48f8d00a72ea0fffd4b to your computer and use it in GitHub Desktop.
Save kapilgarg1996/c48f8d00a72ea0fffd4b to your computer and use it in GitHub Desktop.
Download ZIP
jQuery Mobile issue template // source http://jsbin.com/yematejiru
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile issue template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
<script>
// Your JavaScript ...
</script>
<style>
#edit-with-js-bin { display: none !important; }
</style>
<style id="jsbin-css">
.ui-max-width{
max-width : 100% ;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Issue template</h1>
</div><!-- /header -->
<div class="ui-content">
<div id="test" class="ui-field-contain">
<label for="select-custom-19">Multiple:</label>
<select name="select-custom-19" id="select-custom-19" multiple="multiple" data-native-menu="false" data-mini="false" data-inline="true">
<option>Choose options</option>
<option value="1">The 1st Option</option>
<option value="2" selected="selected">The 2nd Option</option>
<option value="3" selected="selected">The 3rd Option</option>
<option value="4" selected="selected">The 4th Option</option>
<option value="5" selected="selected">The 5th Option</option>
<option value="6" selected="selected">The 6th Option</option>
<option value="7" selected="selected">The 7th Option</option>
<option value="8" >The 8th Option</option>
<option value="9">The 9th Option</option>
<option value="10" >The 10th Option</option>
<option value="11">The 11th Option</option>
<option value="12" selected="selected">The 12th Option</option>
<option value="13" selected="selected">The 13th Option</option>
<option value="14" selected="selected">The 14th Option</option>
<option value="15" selected="selected">The 15th Option</option>
</select>
</div>
</div><!-- /content -->
</div><!-- /page -->
<script id="jsbin-javascript">
$(document).ready(function(){
var $select = $(".ui-select") ;
var width = $select.width() ;
var parentWidth ;
parentWidth = $("body").width() ;
if(width > parentWidth)
$select.addClass("ui-max-width") ;
$select.change(function(){
if(width > parentWidth)
$(this).addClass("ui-max-width") ;
else
$(this).removeClass("ui-max-width") ;
}) ;
});
</script>
<script id="jsbin-source-css" type="text/css">.ui-max-width{
max-width : 100% ;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">
$(document).ready(function(){
var $select = $(".ui-select") ;
var width = $select.width() ;
var parentWidth ;
parentWidth = $("body").width() ;
if(width > parentWidth)
$select.addClass("ui-max-width") ;
$select.change(function(){
if(width > parentWidth)
$(this).addClass("ui-max-width") ;
else
$(this).removeClass("ui-max-width") ;
}) ;
});</script></body>
</html>
Raw
jsbin.yematejiru.css
.ui-max-width{
max-width : 100% ;
}
Raw
jsbin.yematejiru.js
$(document).ready(function(){
var $select = $(".ui-select") ;
var width = $select.width() ;
var parentWidth ;
parentWidth = $("body").width() ;
if(width > parentWidth)
$select.addClass("ui-max-width") ;
$select.change(function(){
if(width > parentWidth)
$(this).addClass("ui-max-width") ;
else
$(this).removeClass("ui-max-width") ;
}) ;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment