ehynds / jquery-ui-multiselect-widget

jQuery UI MultiSelect widget

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

dropdown is appearing above and getting cutoff

edwardselig opened this issue · comments

I'm submitting a ...

  • [ x] bug report
  • feature request
  • question

What is the current behavior?

dropdown options are appearing above the select line in google chrome

What is the expected behavior?

I want the options to be under the select line

screen shot 2018-05-18 at 4 50 44 pm

Can you provide a little more context?

Do you have any other frameworks in use? What version of the widget are you using?

What does your call to multiselect look like?

@edwardselig it's ok.
When no enough space for menu at bottom, so it opened above.
You can adjust it in position object, read about collision http://api.jqueryui.com/position/

I have no other frameworks in use. I'm using jquery-3.3.1.min.js, jqueryui/1.12, MultiSelect UI Widget 2.0.1. This is my call to multiselect:

$("#streamTo").multiselect({
noneSelectedText: 'Select Stream(s)...',
selectedText: "# of # selected",
selectedList: 3,
height:400,
position:{
my: 'center top',
at: 'center bottom',
collision:"flip"
}
}).multiselectfilter();

I also tried without the position but nothing changed. Also one of the big problems with it isn't just that it's opening upward, but that it gets cut off by the URL bar in my browser. Also the code works on safari but not google chrome.

ok, there is a bug that prevent using "collision" property of position object.

See the bug fix here: 5d97ca4

Your code should be collision='none':

$("#streamTo").multiselect({
noneSelectedText: 'Select Stream(s)...',
selectedText: "# of # selected",
selectedList: 3,
height:400,
position:{
my: 'center top',
at: 'center bottom',
collision:"none"
}
}).multiselectfilter();

Alright it turns out all I had to do was reduce the height to 200. We were upgrading from an older version and before setting the height as 400 worked. Now when I scroll down it keeps scrolling back up to the first element in the drop-down, do you know why this would happen?

can you post a sample here https://jsfiddle.net/?

Is it scrolling up each time you open the widget? Or is it scrolling on you while you have it open?

it scrolls up when I have it open, I scroll down a tiny bit and about a second goes by and it goes back to the top

false alarm, it was my code that was just behaving differently after the update. Thanks for the help I think we can close this.

Sounds good.