Skip to content

Instantly share code, notes, and snippets.

@roachhd

roachhd/index.html

Created December 29, 2014 05:58
Show Gist options
  • Save roachhd/604196e919d2d81f2488 to your computer and use it in GitHub Desktop.
Save roachhd/604196e919d2d81f2488 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap: Android select menu fix // source http://jsbin.com/pakovi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Bootstrap: Android select menu fix">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.css" rel="stylesheet" type="text/css">
<title>JS Bin</title>
<style id="jsbin-css">
body {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2>Problem and fix</h2>
<p>On <code>&lt;select&gt;</code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. Use the snippet of code below to remove the offending CSS and render the <code>&lt;select&gt;</code> as an unstyled element on the Android stock broswer. The useragent sniffing avoids interfernece with Chrome, Safari, and Mozilla browsers.</p>
<pre>
&lt;script&gt;
$(function () {
var nua = navigator.userAgent
var isAndroid = (nua.indexOf('Mozilla/5.0') &gt; -1 &amp;&amp; nua.indexOf('Android ') &gt; -1 &amp;&amp; nua.indexOf('AppleWebKit') &gt; -1 &amp;&amp; nua.indexOf('Chrome') === -1)
if (isAndroid) {
$('select.form-control').removeClass('form-control').css('width', '100%')
}
})
&lt;/script&gt;
</pre>
<h2>See it in action</h2>
<form>
<div class="form-group">
<select class="form-control">
<option>Information 1</option>
<option>Information 2</option>
<option>Information 3</option>
<option>Information 4</option>
<option>Information 5</option>
</select>
</div>
<div class="row">
<div class="col-sm-6">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-sm-6">
<div class="form-group">
<select class="form-control">
<option>Information 1</option>
<option>Information 2</option>
<option>Information 3</option>
<option>Information 4</option>
<option>Information 5</option>
</select>
</div>
</div>
</div>
</form>
<hr>
<h3>Before</h3>
<img src="http://media.crossbrowsertesting.com/users/50267/snapshots/ze89ecd8a7bbfbe885fb.png" class="img-responsive">
<h3>After</h3>
<img src="http://media.crossbrowsertesting.com/users/50267/snapshots/z33c0ac1501294941ea8.png" class="img-responsive">
</div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.js"></script>
<script>
$(function () {
var nua = navigator.userAgent
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
if (isAndroid) {
$('select.form-control').removeClass('form-control').css('width', '100%')
}
})
</script>
<script id="jsbin-source-css" type="text/css">
body {
padding: 20px;
}
</script>
</body>
</html>
Raw
jsbin.pakovi.css
body {
padding: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment