Position issue inside absolute scrolling container

[jeremyVignelles]

I am using select-picker in a page where I have a navbar and a main area which is in position:absolute and overflow-y:auto.

When I use a select picker with a long list of items, the select is positioned outside my main area, which make it appear as if it was under my navbar.

See this fiddle: https://jsfiddle.net/up7t3y3q/1/

Steps to reproduce:

resize the "run" area in jsfiddle so that there is not enough space for the selects to drop down.
Open the first select-picker, it will drop up, but is cropped.
Open the second (data-container="body") : it is correctly placed and can go over the navbar. Try to scroll : The picker does not follow
Open the third (data-container=".my-container") : incorrectly placed. Its position seems to depend on the scroll.

What I expect:
I'm ok with the first two behaviors, this is by-design. Limiting the height of the dropdown-menu to the height available inside the closest item having an overflow css property could be rather complex.

The third behavior however seems to be a bug for me, as the .dropdown-menu placement is completely wrong. Would you like me to make a PR?

[caseyjhol]

Hrmmm...the 3rd issue does sound like a bug. For the second issue, you can set

    $('.my-container').scroll(function() {
        $(window).trigger('scroll');
    });

to allow the menu to resize as you scroll.

[jeremyVignelles]

This is indeed a nice workaround ;)
https://jsfiddle.net/up7t3y3q/2/

However, I'm not sure about how it would integrate in my app since several plugins are listening to the scoll event. Maybe I'll give it a try.

[mbenahssene]

Hi,
What about the 1st issue, is it a normal behavior or is there a nice workaround?
Thank you.

[jeremyVignelles]

I think this is a normal behaviour. My page is quite unusual, and the library doesn't know where it should stop the menu. How would you detect that my-container is limited in visible space without stating it explicitely? bootstrap-select doesn't know about it and use the space as if it was available.

In bootstrap-select, as well as in bootstrap itself for some js components, there is a container that should do exactly that : limiting the display of the component without visual change for the user.

[mbenahssene]

Thank you very much you confirm my guess.

[marianopeck]

Hi, did you fix the third issue? I am having a similar problem and I have found no way to fix it.
Thanks!

[marianopeck]

OK, I asked (and posted a JSFiddle) here

[jeremyVignelles]

Hi,
I didn't fix it since I left the company I was working for.
This is still an open issue here, and I don't have much time to submit a PR.

[marianopeck]

Uhhhh too bad :(
I am still not sure if my problem is the exact same as your, but it looks pretty similar. Hope any of the bootstrap-select authors would take a look as I love this lib!

[jeremyVignelles]

Answered here: http://stackoverflow.com/a/38722336/2663813

In short: Your issue demonstrated in your jsfiddle (https://jsfiddle.net/f7f7fpab/) is the same as mine, but for another use case. The bugfix for this issue should resolve both.

[marianopeck]

Hi @caseyjhol

Thanks for the fix! This indeed solves the issue, but for a multi-select list I still have an error:

  bootstrapselect.js:931 Uncaught ReferenceError: containerPos is not definedgetPos @ bootstrapselect.js:931setSize @ bootstrapselect.js:945(anonymous function) @ bootstrapselect.js:1208dispatch @ jQuery.js:3r.handle @ jQuery.js:3

In this code:

   getPos = function() {
        var pos = that.$newElement.offset();
            containerPos;

I did not have this error before. Watching the commit diff it looks related to your last commit, right?

Anyway, let me know if you would need a reproducible test case, as it would take me some time. If it is clear enough, then better.

Thanks in advance and thank you for this great tool

[caseyjhol]

@marianopeck That should be fixed now. The semicolon didn't get changed to a comma.

[marianopeck]

Hi @caseyjhol

Thanks for your answer. However...if I change the semicolon to a comma as you did in your commit, then I do not have the JS error, but the menu goes back to be misplaced (when using data-container="body" while with the semicolon it was correct. WTF ?

[marianopeck]

BTW...is there a way I can point the JSFiddle to use the latest commit from github? If true, I can update this one which is failing now: https://jsfiddle.net/f7f7fpab/4/

[caseyjhol]

Please give it another try now. scrollTop was being added twice if the container was 'body'. Also, you can access the master JS file via https://rawgit.com/silviomoreto/bootstrap-select/master/dist/js/bootstrap-select.js.

[marianopeck]

Hi @caseyjhol

I continue trying but I am still finding problems :( I have updated my JSFiddle to point you latest JS and CSS from github master to ease testing. You can see in the JSFiddle below, how the "state" field is misplaced below. And I cannot even close the popup list :(

https://jsfiddle.net/f7f7fpab/6/

Thanks in advance,

[caseyjhol]

@marianopeck You're not loading the Bootstrap JS on that Fiddle. Adding it appears to make it work.

[marianopeck]

HI @caseyjhol

Sorry, I accidently removed Bootstrap JS when adding the latest Bootstrap-select. Anyway, I just added and I can still reproduce it. I forgot to say that you must put the "State" field on top of the screen to force a dropDown as dropUp does indeed work. Can you confirm that dropDown is also misplacing for you? Here is the updated JSFiddle:

https://jsfiddle.net/f7f7fpab/7/

[caseyjhol]

Ok - now it should be working for you. The issue was .bs-container had a height due to it also having the input-sm class.

[marianopeck]

Hi @caseyjhol

Thanks! That indeed solved my issue. Thank you very much.

Now I have another scenario failing but this is trickier to test. Basically, when I use multi selects with Bootstrap-Select I have an ajax call on the onChange where (at server level) I sort the items so that selected items go first, and then, in a script I re-render the list using replaceWith. This has been working until now. And I cannot realize why it does not work anymore. It looks like if the list is not re-rendered again when I select items. Even worst, if try to scroll in the container, the list gets rendered on the top left of the screen! And if I select another item from there, it gets rendered again in it's original place but the one of the top left is not removed so I have 2 lists opened hahah. It's difficult to explain grrr.

I created a JSFiddle. That exact code reproduced the problem inside my app, but obviously in JSFiddle it does not work as the AJAX call fails..so the ajax call fails and it does not do the replaceWtih. That's the part I don't know how to mock in the JSFiddle.

https://jsfiddle.net/7s3mv7ov/1/

Any idea what could have changed in this regard? Thanks a lot in advance

[jeremyVignelles]

Hi @caseyjhol ,
I just updated my fiddle but the third case is still not correct. Which test case does your fix affect?

[caseyjhol]

@jeremyVignelles The third case should now be fixed in the latest master.

[jeremyVignelles]

Indeed! https://jsfiddle.net/up7t3y3q/6/
Thanks a lot :)

[marianopeck]

Hi @caseyjhol

No clue about mine? I want to put all your fixes into my production app, but the mentioned above ajax problem is preventing me from doing so :(

[caseyjhol]

@marianopeck Can you provide a working example? Perhaps substitute setTimeout to simulate the AJAX request. Hard to see what's going on without getting a better look at your code.

[marianopeck]

Hi @caseyjhol

I tried to isolate the usecase with setTimeout and I failed. But honestly, my AJAX solution to re-render the list is a PITA as the user looses the scroll position, they see flickering, etc etc. So...I ended up thinking that what I really need is to resolve this at client side as in this project. What I need (for multiple lists) is:

1. Show selected items on top.
2. Ability to sort selected items.

For 2) , I think I can solve it with jQuery sortable plus the change() function. But the problem is 1). I have no clue how to implement that. I saw this issue but not real code :(

Any clues or advice?

[marianopeck]

Hi @caseyjhol

OK, I make some progress and I am trying to integrate all your latest changes into my app for my final real testing. The problem is that I still cannot make the jQuery sortable integration, which I need. I asked a question in SO so if you have any clue, that would be appreciated!