I'm trying to set the custom scrollbar to my jquery autocomplete and below is the HTML i'm using, When first time autocomplete menu opens the custom scroller is set and when i type some character in textbox the autocomplete menu width goes out of the screen, I'm unable to figure out the problem. Please suggest some possible solutions for this problem..
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1; user-scalable=no">
<met
a http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script type="text/javascript" src="scripts-css/jquery-1.7.2.js"></script>
<script type="text/javascript" src="scripts-css/jquery-ui.js"></script>
<script type="text/javascript" src="scripts-css/jquery.mobile.js"></script>
<link type="text/css" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script src="http://www.nathanbuskirk.com/jquery.jscrollpane.js" type="text/javascript"></script>
<script type="text/javascript" src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script>
$(document).ready(function(){
var myArray = [ 'zero', 'one', 'two', 'three', 'four', 'five', 'one', 'two', 'three', 'four', 'five', 'one', 'two', 'three', 'four', 'five', 'one', 'two', 'three', 'four', 'five' ];
$('.scroll-pane').jScrollPane();
$('#prdiag').autocomplete({
source:myArray,
open:function(event, ui) {
$('.ui-autocomplete')
.addClass('scroll-pane')
.jScrollPane();
$('.jScrollPaneContainer').css({
'position': 'absolute',
'top': ($(this).offset().top + $(this).height() + 5) + 'px',
'left': $(this).offset().left + 'px'
});
},
focus: function (event, ui) {},
minLength:0
});
//$('.ui-autocomplete').jScrollPane();
});
</script>
<style type="text/css" id="page-css">
.scroll-pane
{
width: 102%;
height: 400px;
overflow: auto;
}
.horizontal-only
{
height: auto;
max-height: 200px;
}
.ui-autocomplete {
height: 200px;
overflow: auto;
-webkit-overflow-scrolling: touch;}
</style>
</head>
<body>
<div data-role="dialog" data-transition="pop" id="dialog-success" ><!-- dialog-->
<div data-role="header" data-theme="e" data-iconpos="right">
<h1>Help</h1>
</div><!-- /header -->
<div data-role="content" data-theme="e">
<input type="text" data-theme="d" id='prdiag' name="primaryDiagnosis" class='autoall' placeholder='Select Primary Diagnosis'/>
</div>
</div>
</body>
</html>
Thanks in advance...
No comments:
Post a Comment