Bootstrap-select: Forcing it to always drop up
How do I make the dropdown always drop up.
I have set the class to "dropup" but it still drops down - and so does the example on the document page!
The screen I am on has "overflow:auto" which may be confusing it, but there is plenty of space above, but it just keeps dropping down.
The documentation is rather confusing on this point.
_"checks to see which has more room, above or below. If the dropup has enough room to fully open normally, but there is more room above, the dropup still opens normally. Otherwise, it becomes a dropup. If dropupAuto is set to false, dropups must be called manually."_
What does it mean ". . . . dropups must be called _manually_"
Furburger
All 10 comments
Set dropupAuto to false. "dropups must be called manually" means that you must apply the dropup class yourself.
caseyjhol
on 3 Jun 2015
Thanks for the prompt reply.
My <select> has the <dropup> class in the markup
Can you maybe change the demo on the document page to mimic this behavior and show us the JQuery or whatever you use to apply the <dropup> class "manually" because your "dropup" there actually drops down just like mine.
Furburger
on 3 Jun 2015
So, setting dropupAuto (or data-dropup-auto) to false and applying the dropup class isn't working for you? That part of the docs is showcasing the dropupAuto feature, but I can see how that might be confusing. The documentation is in major need of an overhaul.
caseyjhol
on 3 Jun 2015
Hi
No it isn’t.
No matter what I do, it keeps dropping _down_
Look at _your_ demo:
I am getting the same result.
Regards
Rick Jordan
_From:_ caseyjhol [mailto:[email protected]]
_Sent:_ 03 June 2015 07:15 PM
_To:_ silviomoreto/bootstrap-select
_Cc:_ Furburger
_Subject:_ Re: [bootstrap-select] Forcing it to always drop up (#1050)
So, setting dropupAuto (or data-dropup-auto) to false and applying the
dropup class isn't working for you? That part of the docs is showcasing the
dropupAuto feature, but I can see how that might be confusing. The
documentation is in major need of an overhaul.
—
Reply to this email directly or view it on GitHub
https://github.com/silviomoreto/bootstrap-select/issues/1050#issuecomment-108528875
.[image: Image removed by sender.]
Furburger
on 3 Jun 2015
In the demo in the documentation, dropupAuto is not set to false - it is set to true, and it appears to be functioning properly. Applying the dropup class only matters if dropupAuto is set to false.
caseyjhol
on 3 Jun 2015
Hi
Thanks once again for the support – it is much appreciated.
I am able to replicate this for you and I think I have identified the
problem.
Here are 2 almost identical
They both have a data-size of 3 so _the space they are going to occupy
above is the same_.
The only difference is that the 1st one has 3 options 2nd one has 20
options.
However, the first one _drops up_ (as expected) but the 2nd one ALWAYS _drops
down._
It seems as if your code is looking at the _number of options_ and ignoring
the _data-size_ attribute when deciding to drop up or drop down.
The easy solution is to just honor the programmer’s indication that it must
ALWAYS DROP UP if it has the “dropup” class (as the documentation implies).
<select class="dropup" data-dropupAuto="false" id="Select1"
data-width="40%" data-size="3">
<option value="2000">This has 3 options</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
</select>
<select class="dropup" data-dropupAuto="false" id="Select2"
data-width="40%" data-size="3">
<option value="2000">This has 20 options</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>
Regards
Rick Jordan
_From:_ caseyjhol [mailto:[email protected]]
_Sent:_ 03 June 2015 10:43 PM
_To:_ silviomoreto/bootstrap-select
_Cc:_ Furburger
_Subject:_ Re: [bootstrap-select] Forcing it to always drop up (#1050)
In the demo in the documentation, dropupAuto is not set to false - it is
set to true, and it appears to be functioning properly. Applying the dropup
class _only_ matters if dropupAuto is set to false.
—
Reply to this email directly or view it on GitHub
https://github.com/silviomoreto/bootstrap-select/issues/1050#issuecomment-108609750
.[image: Image removed by sender.]
Furburger
on 4 Jun 2015
What version of bootstrap-select are you using? I think the issue you're referring to was fixed in v1.7.0-rc1.
caseyjhol
on 4 Jun 2015
Hi
I am on the latest version (1.7.2)
I have made a test page for you to check out.
http://www.ettorney.co.za:85/test.html
Regards
Rick Jordan
_From:_ caseyjhol [mailto:[email protected]]
_Sent:_ 04 June 2015 11:16 PM
_To:_ silviomoreto/bootstrap-select
_Cc:_ Furburger
_Subject:_ Re: [bootstrap-select] Forcing it to always drop up (#1050)
What version of bootstrap-select are you using? I think the issue you're
referring to was fixed in v1.7.0-rc1.
—
Reply to this email directly or view it on GitHub
https://github.com/silviomoreto/bootstrap-select/issues/1050#issuecomment-109054282
.[image: Image removed by sender.]
Furburger
on 5 Jun 2015
Old issue but I am still using this and had this problem, the cause in this case is the capital in the option.
Either use:
.selectpicker({dropupAuto: false})
Or:
data-dropup--auto="false"
(as explained here)
cc #1430
AramVK
on 21 Nov 2018
Set
dropupAutoto false. "dropups must be called manually" means that you must apply thedropupclass yourself.
I would like to apply the "dropdown" for my class with set data-dropup-auto="false". How to do it?
Many thanks
TranPhuocBinh
on 26 Aug 2020
Related issues
Khrysller
·
3Comments
ddinchev
·
3Comments
EmilMoe
·
4Comments
AndreasPresthammer
·
3Comments
yCodeTech
·
3Comments
Most helpful comment
Set
dropupAutoto false. "dropups must be called manually" means that you must apply thedropupclass yourself.