0

I'm using the autocomplete position option to flip the dropdown which works as long as the drop down is long enough to reach the edge of the window...

position: {
        my: "left top",
        at: "left bottom",
        collision: "flip flip"
    },

... but if the list isn't long enough it won't flip and gets hidden behind another element as seen in the following image...

enter image description here

What I'm trying to do is determine when the dropdown is hidden or if scrollbars appear which ever is easier and if it is flip the dropdown.

Community
  • 1
  • 1
JoMojo
  • 390
  • 1
  • 5
  • 18

1 Answers1

1

To detect if horizontal scrollbar is visible (taken from here with slight modification):

(function($) {
    $.fn.hasHorizontalScrollBar = function() {
        return this.get(0).scrollWidth > this.outerWidth();
    }
})(jQuery);

$('body').hasHorizontalScrollBar();

To check if element is FULLY visible you can use isScrolledIntoView function from here

Community
  • 1
  • 1
Ron
  • 3,677
  • 16
  • 69
  • 117
  • The second solution you linked to is what I was looking for! – JoMojo Sep 23 '15 at 01:43
  • just noticed the second solution wokrs great IF the dropdown extends past the window but if it doesn't and it's only half visible because it's hidden by another element it doesn't work. So if the scrollbars are within let's say a fieldset and not the body it doesn't work. – JoMojo Sep 23 '15 at 02:35
  • @JoMojo you can apply the same technique from the second option on whatever you want.. of course you'll have to modify the code a little bit – Ron Sep 23 '15 at 11:04
  • thanks for the info, I'm a total newbie but I was able to write my own plugin to do what I needed. – JoMojo Sep 24 '15 at 16:44