scrollable and scrollable-content inside modal or overlay

[napcat]

Hello there,

I need to list some content on a modal and overlay.

I tryed to use a scrollable and a scrollable-content inside the modal-body but it breaks. The scrollable appears and can be scrolled, but the only about 20/30px area is visible.

What is the best way to use scrollable content on a modal/overlay?

<div class="modal modal-overlay" ui-state="overlayDetails">
    <div class="modal-backdrop in"></div>
    <div class="modal-dialog modal-vertical-centered">

        <div class="modal-content">
            <div class="modal-header">
                <button class="close" ng-click="ModalsVM.Close(false)">
                    &times;
                </button>
                <h3 class="modal-title">{{::ModalsVM.Data.Desc}}</h3>
            </div>
            <div class="modal-body">
                <div class="scrollable">
                    <div class="scrollable-content">
                        <div class="display-info-form-holder">
                            {{::'CLIENT_NUMBER' | translate}}
                            <p class="display-info-text">{{::ModalsVM.Data.Num}}</p>
                        </div>

                        <div class="display-info-form-holder">
                            {{::'ADDRESS' | translate}}
                            <p class="display-info-text">{{::ModalsVM.Data.Address}}</p>
                        </div>

                        <div class="display-info-form-holder">
                            {{::'NAME' | translate}}
                            <p class="display-info-text">{{::ModalsVM.Data.Name}}</p>
                        </div>

                        <div class="display-info-form-holder">
                            {{::'NIF' | translate}}
                            <p class="display-info-text">{{::ModalsVM.Data.Nif}}</p>
                        </div>

                        <div class="display-info-form-holder">
                            {{::'EMAIL' | translate}}
                            <p class="display-info-text">{{::ModalsVM.Data.Email}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="row">
                    <div class="col-xs-12 text-center">
                        <button class="btn btn-primary btn-block btn-lg" ng-click="ModalsVM.Close(false)" data-dissmiss="overlayDetails">
                            {{'BACK' | translate}}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>  

Thank you.

[coverboy]

I have a same problem. Please, fix it or how to increase height. (height is fixed 30px.)

[nail2008]

+1

[brettwsanders]

+1

[sam2x]

Same problem, very important, any help as workaround @mcasimir ? i use to have container-fluid with scrollable, scrollable-content classes (setting height 100% on all adjacent modal div), it works but when i vertically resize the window, i lose some "height" (i guess the height is not dynamically changed or some margin issue?), any helps/ideas from you would be much aprpeciated.

[Nuajan]

Same problem here.

Last commit was in august 2015... Is this project still alive????

[mattweaver]

+1

[stratio84]

Same problem for me, is there any workaround to make it work?

[stratio84]

I found a possible workaround/solution starting from @napcat code. It works by setting the height for the div with modal-body class to an explicit value. You can even set id dinamically through a property calculated inside an angular controller. For example:

<div class="modal-body" ng-style="{'height': '{{modalHeight}}px'}">

And then in your controller, if you want for example the height to be the 40% of the actual viewport height you can write:

$scope.modalHeight = ($window.innerHeight/100*40);