Horizontal Scroll only for Dropdown Buttons

Question

Requirements:

Only Buttons should be Horizontally Scrollable
Dropdown of Buttons should be in place, i.e just below the button as normal
Dropdown of Buttons should not shift the paragraph below, and should merely be on top of the para

Things I've tried:

overflow:hidden/auto
overflow-x:auto

position:static, does work but it pushes the content down

.outer {
  border: 2px solid red;
  width: 70%;
  margin: auto;
  display: flex;
  overflow: auto;
  height: max-content;
  margin-top: 10vh;
}

.side {
  margin-right: 10px;
}

.dropdown-menu {
  position: static !important;
}

.para {
  width: 80%;
  margin: auto;
}






  
    
      
      
        HTML
        CSS
        JavaScript
        HTML
        CSS
        JavaScript
        HTML
        CSS
        JavaScript
      
    
  
  
    
      
      
        HTML
        CSS
        JavaScript
      
    
  
  
    
      
      
        HTML
        CSS
        JavaScript
      
    
  
  
    
      
      
        HTML
        CSS
        JavaScript
      
    
  
  
    
      
      
        HTML
        CSS
        JavaScript
      
    
  
  
    
      
      
        HTML
        CSS
        JavaScript
      
    
  



  
    The .dropdown class indicates a dropdown menu. To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute. The .caret class creates a caret arrow icon (), which indicates that the button
    is a dropdown. Add the .dropdown-menu class to a
    
 element to actually build the dropdown menu.

WizardCoder · Accepted Answer

It is really hard to explain what the issue is, but it is due to the overflow-x:auto, which also effects overflow-y (I'm not sure why) preventing absolute positioned elements from appearing outside the element.

What I did was create an extra wrapper and make the dropdowns relative to it. The wrapper has the default overflow:visible property so that the .dropdown-menu can appear outside of the element.

However this meant that the position of the .dropdown-menu were no longer relative to the .dropdown wrapper so they always appear in the same position.

I had to write a bit of jQuery to compensate for this as well as compensating for when the .outer elements horizontal scroll was activated.

I also added an extra wrapper element around everything with overflow:hidden; so the dropdowns were cropped off when they were scrolled outside of the .outer wrapper.

// Detect dropdown event
$(".dropdown").on("show.bs.dropdown", function(event){
  // get offset position of selected button and subtract scroll .outer scroll position
  var buttonPos = parseInt(event.currentTarget.offsetLeft) - parseInt($(".outer").scrollLeft());
  // Apply button position to dropdown
  $(this).find(".dropdown-menu").css("left", buttonPos);
  // Store buttons offset position to be used to calculate the dropdowns position when .outer is scrolled
  $(this).find(".dropdown-menu").attr("data-leftPos", event.currentTarget.offsetLeft);
});
// Detect when .outer is scrolled
$(".outer").on("scroll", function() {
  var activeDropdown = $('.dropdown.open').find('.dropdown-menu');
  // subtract scroll position from buttons offset position
  var pos = parseInt(activeDropdown.attr('data-leftPos')) - parseInt($(this).scrollLeft());
  // appply updated position to dropdown
  activeDropdown.css("left", pos);
});

html, body {
 height:100%;
}
.wrapper {
  /*  remove overflow-x if you want the dropdowns to appear outside of the .outer element */
  overflow-x:hidden;
  width: 70%;
  margin: 0 auto;
  min-height: 100%;
  padding-top:10vh;
}
.external-dropdown {
  position: relative;
}
.external-dropdown .dropdown, .external-dropdown .dropup {
  position: static;
}
.outer {
  border: 2px solid red;
  display: flex;
  overflow-x: auto;
}
.side {
  margin-right: 10px;
}
.para {
  width: 80%;
  margin: auto;
}






  
    
      
        
          
          
            HTML
            CSS
            JavaScript
            HTML
            CSS
            JavaScript
            HTML
            CSS
            JavaScript
          
        
      
      
        
          
          
            HTML
            CSS
            JavaScript
          
        
      
      
        
          
          
            HTML
            CSS
            JavaScript
          
        
      
      
        
          
          
            HTML
            CSS
            JavaScript
          
        
      
      
        
          
          
            HTML
            CSS
            JavaScript
          
        
      
      
        
          
          
            HTML
            CSS
            JavaScript
          
        
      
    
  

  
    
      The .dropdown class indicates a dropdown menu. To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute. The .caret class creates a caret arrow icon (), which indicates that the button
      is a dropdown. Add the .dropdown-menu class to a

Horizontal Scroll only for Dropdown Buttons

Answers (1)

Related Questions