CODEWITHSUNDEEP
javascriptjquerybootstrap-4dropdown
rafbran
rafbran

Reputation: 21

Is there a way to expand the dropdown menu content upwards?

I would like to use an accordion inside a bootstrap dropdown with up direction ("dropup") and make the menu expand upwards.

I managed to setup the "accordion" inside the dropdown as you can see in the code example.

Here is the html

<div class="dropup" id="dropdownUp">
            <button
              class="btn btn-secondary dropdown-toggle"
              type="button"
              id="btnGroup"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >
              Dropdown
            </button>
            <div class="dropdown-menu" aria-labelledby="btnGroup" id="dmenu">
              <a class="dropdown-item keepopen" href="#c_1" data-toggle="collapse">Category 1</a>
              <ul class="collapse" id="c_1" data-parent="#dmenu">
                <li>Child 1-1</li>
                <li>Child 1-2</li>
                <li>Child 1-3</li>
              </ul>
              <a class="dropdown-item keepopen" href="#c_2" data-toggle="collapse">Category 2</a>
              <ul class="collapse" id="c_2" data-parent="#dmenu">
                <li>Child 2-1</li>
                <li>Child 2-2</li>
              </ul>
              <a class="dropdown-item keepopen" href="#c_3" data-toggle="collapse">Category 3</a>
              <ul class="collapse" id="c_3" data-parent="#dmenu">
                <li>Child 3-1</li>
              </ul>
            </div>
          </div>

And here is the javascript

$(document).ready(function() {
  $('#dropdownUp').on('hide.bs.dropdown', function(e) {
    if ($(e.clickEvent.target).hasClass('keepopen')) {
      return false;
    }
    return true;
  });

  $('#dropdownUp').on('hidden.bs.dropdown', function() {
    $('.dropdown-menu .collapse.show').collapse('hide');
  });
});

Here the link to the example

https://jsbin.com/cirejudipu/edit?html,js,output

The problem is, when the collapse expands, the dropdown menu goes over the button. Is there a way to make the accordion and the dropdown menu expand upwards? Thank you.

Upvotes: 2

Views: 1810

Answers (1)

sao
sao

Reputation: 1821

you could use the transform/rotate CSS property to force the element to turn upside down. you may need to use the same property on the contents to flip them right side up. I've used this on animated CSS/JS apps as well as on flipping entire canvas projects sideways.

here is the line of CSS

transform: rotate(180deg);

let me know if that helps

Upvotes: 1

Related Questions