JSFiddle - React, Tailwind, and code Playground

by Graham Dixon

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="bs-example">
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span>
        </button>
        <ul class="dropdown-menu columns">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a>
            </li>
            <li><a href="#">Action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a>
            </li>
        </ul>
    </div>
</div>
<div class="bs-example">
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span>
        </button>
        <ul class="dropdown-menu columns">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a>
            </li>
            <li><a...

CSS

.bs-example {
    margin: 30px;
    overflow: hidden;
    padding:60px;
    border:1px solid #bbb;
    height:auto;
    width:inherit
}
.dropdown-menu {
    left:inherit!important;
    position:fixed;
    z-index:1000001;
}
.dropdown-back {
    z-index:1000000;
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    display:block;
}
.btn-group {
    width:100%;
}
.btn {
    display:block;
    position:absolute!important;
    right:20px;
}
@media screen and (max-width: 991px) {
    .columns {
        max-height: 250px;
        height: auto;
        overflow-y:auto;
        width: 100%;
        max-width:250px;
    }
}
@media screen and (min-width: 9092px) {
    .columns {
        -moz-column-count:2;
        /* Firefox */
        -webkit-column-count:2;
        /* Safari and Chrome */
        column-count:2;
        -webkit-column-gap: 0px;
        /* Chrome, Safari, Opera */
        -moz-column-gap: 0px;
        /* Firefox */
        column-gap: 0px;
        max-height: 255px;
        height: calc(100% - 150px);
        overflow:hidden;
        width: 100%;
        max-width:500px;
    }
}

JavaScript

var $body = $('body');
$('.dropdown-toggle').click(function () {
    dropDownFixPosition($(this), $('.dropdown-menu', $(this).parent()));
});
function positionPartOnly(button, dropdown){
    var dropDownTop = (button.offset().top + button.outerHeight()) - $(window).scrollTop();
    var dropDownRight = $(window).width() - button.offset().left - button.outerWidth();
    var dropDownLeft = button.offset().left + button.outerWidth();
    dropdown.show();
    if ($(window).height() < (dropDownTop + dropdown.outerHeight())) {
        dropDownTop = dropDownTop - dropdown.outerHeight() - button.outerHeight() - 5;
    }
    dropdown.css('top', (dropDownTop > 0 ? dropDownTop : 0) + "px");
    dropdown.css('right', ((dropDownLeft - dropdown.outerWidth()) > 0 ? dropDownRight : 0) + "px");
}
function dropDownFixPosition(button, dropdown) {
    $('.dropdown-menu').hide();
    positionPartOnly(button, dropdown);
    var back = $body.append($('<div class="dropdown-back"></div>'));
    $('.dropdown-back').on("click", function () {
        $('.dropdown-menu').hide();
        $(this).remove();
        $(window).off("scroll.positionDrop resize.positionDrop");
    });
    $(window).off("scroll.positionDrop resize.positionDrop").on("scroll.positionDrop resize.positionDrop", function () {
        positionPartOnly(button, dropdown);
    });
}