Any Date/Range Picker implemented is coming up at bottom of screen instead of next to input field.

[tvaruntej]

When i implement the date-time picker/date range picker, the popup to select date or option in menu is coming up at bottom of screen and there is no way i could make that populate next to input field where i click to see the menu. Is this a known issue or am i missing anything?

[tcasey]

I came across this issue and found this line document.body.appendChild(self.calenderPane) to be the culprit. It's appending thecalenderPane to the body when it really should be appending it something more well defined. I ended up doing this as a patch fix var myEl = angular.element( document.querySelector( '#inner-editor' ) ); myEl.append(self.calenderPane);

[tvaruntej]

Not sure which element is using this inner-editor id, can you please elaborate a little bit where this piece of code needs to go in the code. I could see this document.body.appendChild(self.calenderPane) in picker.js but i cannot edit it as it is the library imported into my code from bower.

[tcasey]

@tvaruntej #inner-editor was just the element I needed to append it to. I don't know where in your app you would want to append it to. You could just assign an id/class to the directive or a near by container and then append it to that. As for making the change it's bad practice but you could just change that value in the picker.js in the src folder

[tvaruntej]

I figured out the issue, somehow i added this library as a bower dependency in my project and due to some reason the picker.css was not being referenced which was resulting in that styling issue and when i cluded the picker.css styling in my app.css, it worked.