3

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;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="outer">
  <div class="side">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>
  </div>
  <div class="side">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>
  </div>
  <div class="side">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>
  </div>
  <div class="side">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>
  </div>
  <div class="side">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>
  </div>
  <div class="side">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>
  </div>

</div>
<div class="para">
  <p>
    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
    <ul> element to actually build the dropdown menu.
  </p>
</div>
Dhaval Jardosh
  • 7,151
  • 5
  • 27
  • 69

1 Answers1

4

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;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="wrapper">
  <div class="external-dropdown">
    <div class="outer">
      <div class="side">
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
          </ul>
        </div>
      </div>
      <div class="side">
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
          </ul>
        </div>
      </div>
      <div class="side">
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
          </ul>
        </div>
      </div>
      <div class="side">
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
          </ul>
        </div>
      </div>
      <div class="side">
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
          </ul>
        </div>
      </div>
      <div class="side">
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="para">
    <p>
      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
    </p>
  </div>

</div>
WizardCoder
  • 3,353
  • 9
  • 20