Problems with height of modal

@NikolaiDev wrote:

Hello. There is a problem with modal. If content is smaller than a modal window there is a space at the bottom of the window.

image.png406x547 18.3 KB

I tried to fix it using only css but every time there were problems with scrolling. Eventually I created a directive. It works, but obviously it isn't the best solution. Maybe somebody knows how to fix this problem better.

My directive:

angular.module('app')
    .directive('modalHeightManager', function () {
    function link(scope, element, attrs) {
        element.css("bottom", "auto");
        scope.$on("modal.shown", function (e, modal) {
            if (isDescendant(modal.el, element[0])) {
                var children = element.children();
                var childrenHeight = 0;
                for (var i = 0; i < children.length; i++) {
                    childrenHeight += children[i].scrollHeight;
                }
                var cHeight = element[0].clientHeight;
                var bottom = window.outerHeight - element[0].offsetTop - element[0].offsetHeight;
                var delta = childrenHeight - cHeight;
                if (delta > 0) {
                    if (delta < bottom) {
                        $(element).height($(element).height() + delta);
                    }
                    else {
                        $(element).height($(element).height() + bottom);
                    }
                }
                else {
                    $(element).height($(element).height() - bottom);
                }
            }
        });

        function isDescendant(parent, child) {
            var node = child.parentNode;
            while (node != null) {
                if (node == parent) {
                    return true;
                }
                node = node.parentNode;
            }
            return false;
        }
    }
    return {
        link: link
    };
})

and an example:

<ion-modal-view modal-height-manager >

Posts: 1

Participants: 1

Read full topic