Skip to content

Instantly share code, notes, and snippets.

@fhars

fhars/overflow-demo.html

Created November 23, 2011 15:36
Show Gist options
  • Save fhars/1388992 to your computer and use it in GitHub Desktop.
Save fhars/1388992 to your computer and use it in GitHub Desktop.
Download ZIP
Example for truncated options.
Raw
overflow-demo.html
<!doctype html>
<html>
<head>
<title>jQuery UI MultiSelect Widget</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet">
<link href="http://layout.jquery-dev.net/lib/css/layout-default.css" rel="stylesheet">
<style>
select {
display: block;
font-size: 14px;
margin-bottom: 14px;
width: 100px;
}
</style>
</head>
<body>
<div class="ui-layout-north">
Top
</div>
<div class="ui-layout-west">
margin
</div>
<div class="ui-layout-south">
Bottom
</div>
<div class="ui-layout-center">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
<select multiple="multiple" class="simple">
<option value="foo">Foo</option>
<option value="bar">Bar</option>
<option value="baz">Baz</option>
<option value="qux">Qux</option>
<option value="quux">Quux</option>
<option value="quuux">Quuux</option>
<option value="quuuux">Quuuux</option>
<option value="quuuuux">Quuuuux</option>
<option value="foobar">Foo Bar</option>
</select>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="http://layout.jquery-dev.net/download/jquery.layout.min-1.2.0.js"></script>
<script src="jquery.ui.multiselect.js"></script>
<script>
$(function() {
// initialize the plugin
$('body').layout();
$('.simple').multiselect();
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment