1 | | Under 1.9.2 CSS, when the number of results from autocomplete exceeds max-height AND the user scrolls down the result list, whenever the mouse hovers over a result item the result list jumps back to the top making it impossible to scroll down and select an item from the list. |
2 | | |
3 | | I removed jquery-ui-1.9.2.custom.min.css and replaced it with jquery-ui-1.8.23.custom.css and the problem went away. |
4 | | |
5 | | Pertinent code is below: |
6 | | |
7 | | |
8 | | {{{ |
9 | | $('#search').autocomplete({ |
10 | | source: "<?php echo Router::url(array('controller' => 'Residents','action' => 'Search')); ?>", |
11 | | minLength: 2, |
12 | | select: function( event, ui ) { |
13 | | var ResidentControllers = new Array( |
14 | | "Residents","Accounts","EmergencyContacts","Notifications","TransportationPasses" |
15 | | ); |
16 | | var controller = "<?php echo $this->name; ?>"; |
17 | | var action = "<?php echo $this->action; ?>"; |
18 | | if(ResidentControllers.indexOf(controller) != -1){ |
19 | | location.href="<?php echo Router::url(array('controller' => '"+controller+"','action' => '"+action+"')); ?>/"+ui.item.value; |
20 | | }else{ |
21 | | location.href="<?php echo Router::url(array('controller' => 'Residents','action' => 'Edit')); ?>/"+ui.item.value; |
22 | | } |
23 | | return false; |
24 | | }, |
25 | | open: function(){ |
26 | | $(this).autocomplete('widget').css('z-index', 9999999999999999); |
27 | | return false; |
28 | | } |
29 | | }).data("autocomplete")._renderItem = function(ul, item){ |
30 | | if(item.value){ |
31 | | var imageUrl = "<?php echo $this->Html->webroot('img/residents/'); ?>"; |
32 | | return $( "<li></li>" ) |
33 | | .data( "item.autocomplete", item ) |
34 | | .append( |
35 | | "<a class=\"uiasearchitem\" style=\"float:left;\">"+ |
36 | | "<div style=\"float:left;\">"+ |
37 | | "<img class=\"avatar\" width=\"80px\" height=\"60px\" src=\""+imageUrl+item.filename+"\" />"+ |
38 | | "</div>"+ |
39 | | "<div class=\"username\" style=\"font-size:10px;float:left;clear:right;width:240px;\">"+item.name+"</div>"+ |
40 | | "<div class=\"laststay\" style=\"font-size:10px;float:left;clear:right;width:240px;\">"+item.last_stay+"</div>"+ |
41 | | "<div class=\"bars\" style=\"font-size:10px;float:left;clear:right;width:240px;\">No Bars</div>"+ |
42 | | "</a>" |
43 | | ).appendTo( ul ); |
44 | | }else{ |
45 | | return $( "<li></li>" ) |
46 | | .data( "item.autocomplete", item ) |
47 | | .append(item.message) |
48 | | .appendTo( ul ); |
49 | | } |
50 | | }; |
51 | | }}} |
| 1 | Hovering over the very top or bottom of a scrollable suggestion list (using max-height) causes the menu to scroll. This is visible in the maxheight demo. |