The will popup will go under other elements about angular-moment-picker HOT 15 CLOSED

+1 - I have the same problem w Angular Material Dialog

from angular-moment-picker.

Hi @crissi,
Angular Moment Picker now uses a css workaround to append the picker just below the selected element/input, and I know this may cause errors like the one you reported.
By now, you could resolve this by creating a custom stylesheet that overrides the default stylesheet.

This is because Angular's jqLite (docs) does not provide an .offset() and a .position() method like jQuery.

Anyway if you'd like to file a PR to resolve this I would review it. :)

from angular-moment-picker.

Hi,
What should be in the custom stylesheet to override this?

Thanks!

from angular-moment-picker.

Hi @checklist, it depends on your application, the first thing you could do is to check the zIndex of your elements and give to the .moment-picker-container the highest one (currently its value is 5).

from angular-moment-picker.

Thanks. I tried that but with no success already before. I ended by remving the "before" .

Great lib. Thanks!

from angular-moment-picker.

Hi @checklist I tried removing the :before as you suggested to no avail, it might be that I was targeting the wrong one.
Do you remember which one was it ?
Or better yet @indrimuska has the problem been solve in a newer version ?

from angular-moment-picker.

Sorry but we could not solve the issue. This issue is repeating in many places and z-index changes we make do not affect the popup. Kinda gave up 👎

from angular-moment-picker.

The best solution is to allow users to append the picker to the body, but it implies to retrieve the absolute position (x, y) of the text input. This is easy to perform with jquery, but unfortunately jqLite doesn't have that support. So the only way to achieve this goal is to create a jquery-like position() function.

from angular-moment-picker.

The current solution of including the view inline can cause issues with some layouts as well as the problems described here. I suggest taking the $uibPosition factory from https://github.com/angular-ui/bootstrap/blob/master/src/position/position.js (with proper attribution). The $uibPosition.positionElements method does everything we need here for positioning.

In my fork I have started using that factory by adding a dependency on ui-bootstrap (since I was using it for other features anyway). Ideally angular-moment picker would have two builds, one that included $uibPosition and another that relied on ui-bootstrap, so as not to include it twice.

from angular-moment-picker.

Thank you @AgDude for you suggestion. Some commits ago, I added the getOffset() method ("borrowed" from jQuery's offset api). I haven't try it out yet, but I will do when I'll have some spare time. However, I really don't want to depend to any other lib or plugin, just the AngularJS framework (if I had added jQuery's dependency, this issue would have been already closed).

from angular-moment-picker.

YMMV - had the same problem and added these overrides to fix it

position: initial; for moment-picker class
top: initial; for moment-picker-container class

from angular-moment-picker.

Same problem using angular material. @ericdecarli suggested fix doesn't work.
I don't understand why the z-index attribute doesn't work.

from angular-moment-picker.

@simonemazzoni and @Adoniasv: I have the same problem in Angular Material as you.
I've made some progress. After inspecting how the "native" md-select is getting around this, I could see that the moment-picker needs to be moved out of the md-dialog. So I wrote a small directive to do that. I'ts kind of hacky, but it gets the job done:

(function () {
    'use strict';

    angular
        .module('core')
        .directive("inDialog", FixMomentPickerWhenInDialog);

    /** @ngInject */
    function FixMomentPickerWhenInDialog() {
        return {
            restrict: 'A',
            link: function (scope, ele, attrs, ctrl) {
                var mdDialog = $(ele).parents(".md-dialog-container");
                if (mdDialog.length == 0) return; /* Not inside a dialog*/

                var pickerContainer = $(ele).parent().parent().find(".moment-picker-container");

                var newPickerTopContainer = $('<div class="moment-picker"></div>');
                $(mdDialog).append(newPickerTopContainer);
                newPickerTopContainer.append(pickerContainer);

                angular.element(ele).contents().scope().picker = newPickerTopContainer;
                newPickerTopContainer[0].style.top = "100px";
                newPickerTopContainer[0].style.left = "-500px";
            }
        }
    };
})();

Put it on your moment-picker like this <span moment-picker ... in-dialog></span> and you will end up with this:

As you can see I'm almost there, but CSS positioning is beyond my understanding, so I can't quite figure out how to get the measures right (and get rid of the hard-coded pixels).

Maybe someone with CSS-ninja skills can finish this?

Cheers!

from angular-moment-picker.

I fixed my issue by overriding my content body overflow to visible. Which turns off clipping and doesn't add a scroll bar to the div. Angular Material had set overflow: auto; for md-content which caused the clipping described here. Might help somebody else using angular material. I'm fine with being unable to scroll in md-content when the whole page can still be scrolled normally. Good luck!

from angular-moment-picker.

Finally, this should be fixed in the latest version (v0.10.0)!

from angular-moment-picker.