6

I'm working on a project over at github pages, which I replace a bootstrap .dropdown with .dropup if the div's overflow-y: scroll will cause the dropdown menu to be cutoff / overflow. You can see the function working properly at this jsfiddle. Notice if you click on the ellipsis icon to the right on the top rows, it will drop down, if you click on the icon on the bottom rows, it will drop up.

Now, my actual implementation (github page), the code is exactly the same (below), but it wants to replace all .dropdown classes with .dropup when opened, including the top-most row which gets cut off, seen in the photo below. enter image description here I've been struggling with this for a week and can't quite figure it out. I've tried a few different things that I thought fixed it but ended up just being a hack and didn't work on mobile, or replaced some but not all etc.

Here is the Javascript / jQuery I'm using, which can be seen in the jsfiddle and my github source here.

$(document).on("shown.bs.dropdown", ".dropdown", function () {
  // calculate the required sizes, spaces
  var $ul = $(this).children(".dropdown-menu");
  var $button = $(this).children(".song-menu");
  var ulOffset = $ul.offset();
  // how much space would be left on the top if the dropdown opened that direction
  var spaceUp = (ulOffset.top - $button.height() - $ul.height()) - $('#playlist').scrollTop();
  // how much space is left at the bottom
  var spaceDown = $('#playlist').scrollTop() + $('#playlist').height() - ((ulOffset.top + 10) + $ul.height());
  // switch to dropup only if there is no space at the bottom AND there is space at the top, or there isn't either but it would be still better fit
  if (spaceDown < 0 && (spaceUp >= 0 || spaceUp > spaceDown))
    $(this).addClass("dropup");
}).on("hidden.bs.dropdown", ".dropdown", function() {
  // always reset after close
  $(this).removeClass("dropup");
});

Edit: To clear up any confusion, here's an example of the behavior without my added .dropup function. jsfiddle Notice when you click the last menu item, it opens the menu but requires scrolling. I specifically want to remove the .dropdown class and add .dropup in this case, so no scrolling is required.

3
  • Maybe make the .dropup class !important
    – user1752532
    Commented Oct 19, 2016 at 4:35
  • @gerdi I don't think that will fix the issue I'm having. Specifically because as the image shows it is only adding the dropup class.
    – dcclassics
    Commented Oct 19, 2016 at 12:53
  • try change z-index of element
    – user6079755
    Commented Oct 21, 2016 at 19:08

4 Answers 4

4

It took some basic math, but I managed to figure out what you desired to do. This code changes the bootstrap classes between dropup and dropdown depending on the room available for a normal dropdown.

I calculated this by detracting the height of the button, dropdownmenu and how far the button was scrolled down in the scrollContainer from the height of the scrollContainer. I got the value how much the div was scrolled down by using the buttons offset and detracting the offset from the scrollContainer.

Here is my jQuery (I selected the .playlist class because this was attached to your scrollContainer, but you should replace it by an id or select it by other means):

$(".dropdown, .dropup").click(function(){
 var dropdownClassCheck = $(this).hasClass('dropdown');
 var buttonOffset = $(this).offset().top;
 var scrollboxOffset = $('.playlist').offset().top;
 var buttonHeight = $(this).height();
 var scrollBoxHeight = $('.playlist').height();
 var dropDownButtonHeight = $(this).children('ul').height();
 dropdownSpaceCheck = scrollBoxHeight>buttonOffset-scrollboxOffset+buttonHeight+dropDownButtonHeight; 
 if(dropdownClassCheck && !dropdownSpaceCheck){
  $(this).removeClass('dropdown').addClass('dropup');
 }
 else if(!dropdownClassCheck && dropdownSpaceCheck){
        $(this).removeClass('dropup').addClass('dropdown');
 }
});

A working JSFiddle

Let me know if there are parts of the code that could be improved/done easier or if there are any problems with my solution.

3
  • Could you please check out this page: kmodoio.github.io/wavesurfer-player.js I substituted your code and it doesn't perform the same here as in the fiddle, which does exactly what I want.
    – dcclassics
    Commented Oct 23, 2016 at 1:37
  • Can you try updating your jQuery source? Because I am using the hasClass function, which is added in jQuery v1.2. You are using v1.12. I assume this could possible solve the issue you are having. If not what error messages do you get in the console? Commented Oct 23, 2016 at 4:39
  • Wow, no idea why I had such an outdated version there, thanks for pointing that out. So I am getting somewhere. I had to change the selector on the .click() to .song-menu, .dropdown wasn't working, thus then had to change some of the $(this) to $(this).parent(), which made everything seem to function correctly. Finally just added 25px padding to the dropDownButtonHeight variable because it wasn't perfect on the element second from the bottom, seems to be great now.
    – dcclassics
    Commented Oct 23, 2016 at 5:12
2
+50

I have not thoroughly checked, but .scrollTop() is probably why the code fails when combined with other elements in the DOM, so here is a solution without it:

function checkHeights(){
  // LOOP through each dropdown
  $('.dropdown,.dropup').each(function(index,element){
    var $dropDown = $(element),
        $dropDownMenu = $dropDown.find('.dropdown-menu'),
        dropDownTop = $dropDown.offset().top,
        visibleHeight = $dropDown.height(),
        hiddenHeight = $dropDownMenu.height(),
        ddTop = dropDownTop - hiddenHeight,
        ddBottom = dropDownTop + visibleHeight + hiddenHeight;
    
    // LOOP through all parents
    $dropDown.parents().each(function(ix,el){
      var $el = $(el);
    
      // CHECK if any of them have overflow property set
      if( $el.css('overflow') !== 'visible' ){
        var limitTop = $el.offset().top,
            limitBottom = limitTop + $el.height();
      
        // CHECK if parent is better fit when dropped upside
        if( limitBottom < ddBottom && ( ddTop - limitTop ) > ( limitBottom - ddBottom ) )
          $dropDown.removeClass('dropdown').addClass('dropup');
        else
          $dropDown.removeClass('dropup').addClass('dropdown');
      
        // BREAK LOOP
        return false;
      }
    });
  });
}

$(document).ready(function() {
  checkHeights();
  $('.playlist').scroll(checkHeights);
});

JS Fiddle here.

This one does not require any class or id given to it except for dropdown,dropdown-menu, and dropup (all of which are Bootstrap defaults) and would work fine even if there are multiple playlists on page.


UPDATE

The code is modified and wrapped in a function in order to allow being called when scroll event fires.

2
  • Thanks for your answer. Could you check out my updated fiddle here: jsfiddle.net/we3jw1jr/3. Specifically, what I've done at the bottom. I wrapped your code in a function so that I could run it when the .playlist element scrolls. The function is called, but doesn't seem to perform what you provided.
    – dcclassics
    Commented Oct 23, 2016 at 3:20
  • 1
    @dcclassics You have to do two minor changes for continuous checking: (1) Add .dropup selector to the first loop and (2) Add an else statement to the limit check. I am updating the answer accordingly now.
    – Arman Ozak
    Commented Oct 23, 2016 at 9:58
1

I think that the problem it's that you have a big header, and the jsFiddle don't. So ulOffset.top it's always big, and spaceDown is always negative

1
  • I figured it would be something like this, so I need to offset for the space of the header, maybe that's why it acts even different on mobile?
    – dcclassics
    Commented Oct 21, 2016 at 19:49
0

Replace parent div.dropdown with div.dropup.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.