- Issue created by @_tarik_
- Merge request !16Issue #3493187 by _tarik_: Added code to handle place where dropdown appears. → (Open) created by _tarik_
- 🇩🇪Germany Antonín Slejška Hannover
I have the same problem in Gin. The MR looks good for me, and it works (in Gin).
- Issue was unassigned.
- Status changed to Needs review
29 days ago 3:23pm 19 March 2025 - 🇫🇷France NathLL
I have the same problem with Gin too.
I have a questions :
- Does this fix change the dropdown from above to under if there is the place to display it under ?
- What's the behavior if there is no more place above but enough under ? Does it change from above to under automatically or if I close and re-open it ?I have try it on v3.0.x and seems to work, but the dropdown is fixed above whatever I do.
Thanks for helping. - 🇫🇷France NathLL
I pushed a branch (in fork issue) for chosen 3.0.x : https://git.drupalcode.org/issue/chosen-3493187/-/tree/3493187-3-0-x-dro...
(I'm new to contributing so I'm not sure it's the good way to do it, please let me know it. Thanks).I made some changes. I think it could be better to check the space above and below the container to determine if the dropdown should be display above or below.
I also found an issue in your fix. You add class "dropdown-above" on the container and add
style="bottom: XXXpx"
(XXX is the element height) one the element (.chose-drop). But you never remove them. So if we resize the windows without reload the page then the display is not changed. So if there is no more space above, it stills display above which is not good.Here my code :
chosen/js/chosen.js line 105$element.on('chosen:showing_dropdown', function () { var $container = $(this).next('.chosen-container'); var container_position = $container.offset(); var container_height = $container.height(); var $chosen_dropdown = $container.find('.chosen-drop'); var scroll_top = $(window).scrollTop(); var window_height = $(window).height(); var space_above = container_position.top - scroll_top; var space_below = (scroll_top + window_height) - (container_position.top + container_height); if (space_above > space_below) { $container.addClass('dropdown-above'); $chosen_dropdown.css('bottom', $container.height()); } else { $container.removeClass('dropdown-above'); $chosen_dropdown.css('bottom', ''); } });
My changes are on chosen v3.0.x but can easily be applied on chosen 4.0.x (see my patch. WARNING : I have not tested it, but this code is working for 3.0.x and changes are little from what the original fix proposes).
WARNING : This code doesn't just has an impact on VBO dropdown but it impacts all dropdowns using chosen