環境
- OS : macOS Sierra Version 10.12.6
- ブラウザ : Chrome
- jquery : v1.11.1
- jquery-ui : v1.10.4
- bootstrap : v3.3.0
- bootstrap-select : v1.6.3

事象

画面にあるbootstrap-select製プルダウンでは問題ないのですが
スクロールできるダイアログではリストが画面からはみ出して選択できなくなることがあります。

原因 : CSSで`overflow-y: scroll`を指定しているから

ダイアログでスクロールできるようにoverflow-y: scrollを指定していると
リストの上部は存在しているのですが見えなくなるのです。

html

<!DOCTYPE html>
<html>
<head>
    <title>bootstrap-sassで作るプルダウン</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="css/myBootstrapSelect.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/myBootstrapSelect.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
</head>
<body>
    <button type="button" id="modalButton" class="btn btn-primary btn-lg">ダイアログ</button>
    <select class="selectpicker"></select>
    <div id="modalDialog" class="ui-widget-content">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" id="closeButton">閉じる</button>
                </div>
                <div class="modal-body">
                    <select class="selectpicker"></select>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

myBootstrapSelect.js

$(window).on('load', function() {
    createSelectOption();
});

$(function() {
    $('#modalDialog').fadeOut(0);
    $('#closeButton').click(onClickCloseButton);
    $('#modalButton').click(openDialog);
});

/**
 * ドロップダウンの中身を作る.
 */
function createSelectOption() {
    var selectObj = $('.selectpicker');

    for (var i = 0; i < 50; i++) {
        var option = $('<option>');
        option.html(i);
        selectObj.append(option);
    }
}

/**
 * ダイアログを開く.
 */
function openDialog() {
    $('#modalDialog').fadeIn(0);
    $('#modalDialog').draggable();
}

/**
 * ダイアログを閉じる.
 */
function onClickCloseButton() {
    $('#modalDialog').fadeOut(0);
}

myBootstrapSelect.css

/**
 * ウィンドウ全体のスタイル.
 */
body {
    display: flex;
    flex-direction: column;
}

/**
 * [ダイアログ]ボタンのスタイル.
 */
#modalButton {
    margin: 30px;
    width: 200px;
}

/**
 * プルダウンのスタイル.
 * bootstrap-selectスタイルに負けないように具体的にセレクタを記載.
 */
select + .btn-group.bootstrap-select:not(.input-group-btn) {
    margin: 30px;
}

/**
 * ダイアログのスタイル.
 */
.modal-content {
    width: 300px;
    height: 120px;
    overflow-y: scroll;
}

対応方法1 : ダイアログを広げてスクロールを諦める

超簡単

１. ダイアログのスタイルに設定されたheightとoverflow-y: scroll を削除かコメントアウトする

myBootstrapSelect.css

<他は変更ないので省略>
/**
 * ダイアログのスタイル.
 */
.modal-content {
    width: 300px;
/*    height: 120px;
    overflow-y: scroll;*/
}

対応方法2 : ダイアログからはみ出さないように表示されるリストの行数を決める

`data-size`版

bootstrap-selectのdata-sizeについてはこちらを参照して下さい。
１. ダイアログの<select class="selectpicker"></select>にdata-sizeをつける

html

<他は変更ないので省略>
                    <select id="dialogSelect" class="selectpicker" data-size="3"></select>
<他は変更ないので省略>

`options`版

bootstrap-selectのoptionsについてはこちらを参照して下さい。
１. ダイアログの<select class="selectpicker"></select>にidをつける

html

<他は変更ないので省略>
                    <select id="dialogSelect" class="selectpicker"></select>
<他は変更ないので省略>

２. プルダウンを作成するメソッドを作ってダイアログを開く時に呼ぶ

myBootstrapSelect.js

<他は変更ないので省略>
/**
 * ダイアログを開く.
 */
function openDialog() {
    $('#modalDialog').fadeIn(0);
    $('#modalDialog').draggable();
    createDropdown();
}

/**
 * ドロップダウンを作る.
 */
function createDropdown() {
    $('#dialogSelect').selectpicker();
}
<他は変更ないので省略>

３. selectpicker()にsizeを指定したoptionsを渡す

myBootstrapSelect.js

<他は変更ないので省略>
/**
 * ドロップダウンを作る.
 */
function createDropdown() {
    var options = {
        size: 3
    };
    $('#dialogSelect').selectpicker(options);
}
<他は変更ないので省略>

参考にしたソース

bootstrap-select/1.6.3/js/bootstrap-select.js

<省略>
    setSize: function () {
<省略>
      } else if (this.options.size && this.options.size != 'auto' && menu.find('li' + notDisabled).length > this.options.size) {
        var optIndex = this.$lis.not('.divider' + notDisabled).find(' > *').slice(0, this.options.size).last().parent().index();
        var divLength = this.$lis.slice(0, optIndex + 1).filter('.divider').length;
        menuHeight = liHeight * this.options.size + divLength * divHeight + menuPadding;
        if (that.options.dropupAuto) {
          //noinspection JSUnusedAssignment
          this.$newElement.toggleClass('dropup', (selectOffsetTop > selectOffsetBot) && (menuHeight < menu.height()));
        }
        menu.css({'max-height': menuHeight + headerHeight + searchHeight + actionsHeight + 'px', 'overflow': 'hidden'});
        menuInner.css({'max-height': menuHeight - menuPadding + 'px', 'overflow-y': 'auto'});
      }
<省略>

他の理由でリストが見切れたら・・・

bootstrap-select でドロップダウンリストが上向き表示時にリスト領域がfixedボックス位置で途切れた！containerオプションで対策 | サイト構築日記

事象

原因 : CSSでoverflow-y: scrollを指定しているから

対応方法1 : ダイアログを広げてスクロールを諦める

対応方法2 : ダイアログからはみ出さないように表示されるリストの行数を決める

data-size版

options版

参考にしたソース

他の理由でリストが見切れたら・・・

原因 : CSSで`overflow-y: scroll`を指定しているから

`data-size`版

`options`版