Set dialog position

[Seiifer]

Hi, thanks for this usefull tool you are providing.

I was wondering :

Is there a way to set the position of a new dialog ?
I tried a few things with appendTo but it didn't work for me. I wish to open mydialog depending on the current position of the mouse. The ideal would be to :

• set the up-left dialog's corner position to the current mouse position if the mouse is closer to the up-left corner of the window.
• set the up-right dialog's corner position to the current mouse position if the mouse is closer to the up-right corner of the window.
• set the down-left dialog's corner position to the current mouse position if the mouse is closer to the down-left corner of the window.
• set the down-right dialog's corner position to the current mouse position if the mouse is closer to the down-right corner of the window.

Also, is there a way to specify a dialog's width and height ? And making its content scrollable if it requires more than the given height (scrollable or height-extendable by clicking on a specific element in the bottom of the dialog otherwise)

Regards

[egor-smirnov]

@Seiifer

About the first part with positioning. I won't introduce something related to mouse position into API of the ngDialog. I would better introduce some position option that let developer override the position where dialog will appear. In this case, you as a user of the plugin will decide what are the coordinates (you will set them according to your algorithm). You thoughts?

About second part with width / height / scrolling. It's more CSS related. Take a look at #251

[Seiifer]

@egor-smirnov

Adding a position parameter looks great and will suit most of user cases, but to be honest I was wondering if there wasn't already something allowing it since there is some append function.

Regarding the second part, I'm already using the plain theme with custom width that allows me to choose the width of the dialog.
But I don't know how to specify a maximum height for the dialog, allowing us to activate scrolling in the dialog if its contents takes more than its height.

[egor-smirnov]

@Seiifer so I am going to add positioning support for the next versions. Thanks for idea.

Regards max height - will height:200px;overflow:auto; work for you (where 200 px is your desired height)?

[Seiifer]

Regarding the height, you intend to make the dialog content scrollable if it reaches the max height ?

Ideally, the best would be to be able to set width and height. For example, replacing custom-width with custom-dimensions then we just need to change the content height and width in css.

[egor-smirnov]

Regarding the height, you intend to make the dialog content scrollable if it reaches the max height ?

Yes. About height things - please create separate issue or submit PR with more precise explanations.

I am going to keep this issue for tracking progress related to positioning of the dialog.

[bfree-github]

@egor-smirnov

I need to change the position of the dialog for small devices (via @media). I've been looking for a ngDialog position parameter, but couldn't find anything... was about to go through the code to add one myself, when I saw this posting...

Any idea when you'll have this change posted?

Alternately, if the position could be relative to the display area (as opposed to the page size), then I could avoid @media altogether.

Much thanks - awesome job!

[egor-smirnov]

@bfree-github looking at doing this in upcoming 1-2 weeks, but can't be precise; quite busy at my job last days.

You could submit PR if you want this ASAP.

[bfree-github]

Understood - thanks!

[bfree-github]

Oh wow - going through the code, I found that padding-top does exactly what I'm looking for.

I just set it to 15% and it works the way I want on all devices!

Thanks!

[gottfrois]

A position option would be great

[NicolaiKilian]

Hello,

I've written a couple of services to make the dialogs adapt automatically to the window height, including a scrollbar:

First, send an event whenever the window is resized:

angular.module('myApp').directive('resize', function($window, dimensionService) {
    return {
        link: function(scope, element, attrs) {
            angular.element($window).on('resize', function() {
                scope.$broadcast('resize::resize', dimensionService.getWindowDimension());
            });
        }
    };
});

angular.module('myApp').factory('dimensionService', function (ngDialog, $window, $document) {
    var DimensionService = {};

    DimensionService.getWindowDimension = function() {
        var w = $window,
            d = $document[0],
            e = d.documentElement,
            g = d.getElementsByTagName('body')[0],
            x = w.innerWidth || e.clientWidth || g.clientWidth,
            y = w.innerHeight|| e.clientHeight|| g.clientHeight;

        return {'innerWidth' : x, 'innerHeight' : y};
    };

    return DimensionService;
});

<body ng-app="myApp" resize>

Then, listen to both the resize event and the dialog-opened event and set the dialog content panel's height accordingly:

angular.module('myApp').factory('dialogService', function (ngDialog, dimensionService) {
    var DialogService = {};

    DialogService.open = function(scope, dialogParams) {
        var dialog = ngDialog.open(dialogParams);

        function updateMaxHeight(windowInnerHeight) {
            $('#' + dialog.id + ' .ngdialog-content').attr('style', 'max-height:' + (windowInnerHeight * 0.8) + 'px; overflow-y: auto');
        }

        scope.$on('ngDialog.opened', function (event, $dialog) {
            updateMaxHeight(dimensionService.getWindowDimension().innerHeight);
        });

        scope.$on('resize::resize', function(event, windowSize) {
            updateMaxHeight(windowSize.innerHeight);
        });
    };

    return DialogService;
});

Hope that helps you!

[bfree-github]

That's great - much thanks!

[NicolaiKilian]

you're welcome! Change the factor 0.8 as needed

[f1ght4fun]

Hello,

Is there any updates on adding 'position' to available dialog options?
Feedback would really be appreciated!

Tnx

[egor-smirnov]

Currently no, I am too busy at my full-time job. You could contribute by writing actual code & opening new PR. This will be appreciated a lot.

This feature request is on top of priority list and I am going to. But feel free to contribute if you need it ASAP. Just warn me beforehand if any of you is going to implement this yourself in the nearest time. This is needed not to do the same work later from my side.

Thanks for understanding.

[bfree-github]

I might have some bandwidth to work on this next week. I'll let you know what how I plan to do it before submitting changes. Thanks!

[egor-smirnov]

@bfree-github 👍

[faceleg]

@bfree-github bump

[iambkg]

Hi there!
Is there any news about position attribute? Using your lib and need this option so much...
Thanks in advance!

[egor-smirnov]

@iambkg no news from our side :( Until the next year I won't have enough time for ngDialog.
@bfree-github @faceleg maybe you have some time?

[bfree-github]

Sorry for my delay - I just came out of ER for angioplasty and 2 stents for 3 blocked arteries.

I’ll try to look into after I recover - Bob

On Dec 2, 2015, at 1:42 AM, Egor Smirnov [email protected] wrote:

@iambkg https://github.com/iambkg no news from our side :( Until the next year I won't have enough time for ngDialog.
@bfree-github https://github.com/bfree-github maybe you have some time?

—
Reply to this email directly or view it on GitHub #222 (comment).

[iambkg]

Hi guys!
@egor-smirnov, @bfree-github thank you for your responses, we have a workaround - position dialogs via CSS. So, positioning via binding is not so major issue for now.
Thank you all for your work!
Regards,
Alexey

[faceleg]

Hope you recover swiftly and fully, @bfree-github

[markzolotoy]

@iambkg
Can you please share with us how exactly you are positioning the dialog window?

[iambkg]

@markzolotoy
Sure. (Sorry for delay).
We use positioning via css, set it from code. May it's not the best way, but this approach works for us.
(We use TypeScript)

let dialogContainer: JQuery = $('.dialogClassName'); // get dialog container by class name
if (dialogContainer.length > 0) {
    const dialogTop: number = 15; // hardcode just for example, we use some calculations here
    const dialogLeft: number = 20; // here too
    dialogContainer.css({top: dialogTop + 'px', left: dialogLeft + 'px'});
}

And we create dialog this way:

//...
this.dialogResult = this.ngDialog.open({
    className: 'dialogClassName' // there are more options here, skip them as they are not needed here, I think
});
//...

[waterplea]

Any news on adding position parameter to the ngDialog? :)

[faceleg]

There will be no news until someone submits a PR 💃

[shannonlal]

I have recently used ngDialog on a project and was able to figure out how to move the placement of the dialog by changing the css (i.e. changing the margin for the .ngdialog-content). I would be willing to implement a fix for this but wanted to check if the following solution would work:

1. Using an ng-click capture the event and determine the x and y position
2. Adjust the css (.ngdialog-theme-default .ngdialog-content) for the margin so that the correspond to the x and y position for the event.

If this seems like a feasible solution or if you have alternative solutions please let me know.

Thanks

Shannon

[bhollis]

I might suggest using jQuery UI position and accepting the same arguments - that would allow for nicely expressing the position of the dialog relative to another element, with flexibility around how it behaves around edges of the viewport.

[faceleg]

We're not adding a jQuery or jQuery ui dependency for this project

[bhollis]

the position module is super useful and easy to divorce from jQuery itself (it has no dependencies on the rest of jQuery UI either).