Positioning Angular UI bootstrap Datepicker

[abottoni]

Hi. As I explained in my case in Stack Overflow (http://stackoverflow.com/questions/18716904/positioning-angular-ui-bootstrap-datepicker) I am having a problem with the positioning in the datepicker. It always appears below the input that invoke it from the bottom left corner. But if the input is close to the right border of the page, the datepicker is cut and a horizontal scroll appears.

I am writing because I think it would be a nice feature to handle the alignment in the datepicker configuration.

Hoping you take this into consideration

Kind Regards
Andrey Bottoni

[abottoni]

To temporary solve my issue, I have made a lot of changes. I had to alter the template and remove the left attribute from the inline style. The other thing that I did was encapsulate the input and the datepicker in a Div and using CSS and relative positioning I create a style for the left and right alignment and everywhere I used it, I set the CSS class according the alignment I need. I think it would be easier to have an attribute in the datepicker directive to set the aligment

[terohe]

Still no solution for this?

[bekos]

Unfortunately not. We are trying to come up with a general solution, not just for the datepicker.

[networkerror]

Ugly hack:

<div class="hackyhack">
  <input datepicker-popup="...">
</div>

Magic CSS:

.hackyhack {
  position: relative;
}
.hackyhack .dropdown-menu {
   left: auto !important;
   right: 0px;
 }

The trick here is that we setting the parent div to be the anchor for all absolutely positioned children (such as .dropdown-menu). This will not work if you set the option to append the date picker to the body. (By default, it appends to the parent node - which is awesome sauce.)

[Martinsos]

Hi everybody, I am looking forward when this will get implemented!
In the meantime I created a small fix (using angular directives) which currently adds only right alignment, but feel free to contribute!
Fix: https://github.com/Martinsos/datepicker-position

[hardywu]

Is there any easy way to pop the datepicker into a modal in order to avoid this issue?

[adressin]

+1

[xob]

+1

[richthedev]

+1

[enapupe]

+1
meanwhile @networkerror's solution did it very nice. ( i had an ugly margin-left -94px)

[maorshabo]

+1

[pippo3]

+1

[simonedavico]

+1. I needed to put it on top of the textbox, but didn't want to change the template's code. I solved it by using @networkerror's solution:

.input-group {
  position: relative;

  //position it on top of input
  .dropdown-menu {
   top: -245px !important;
  }
}

This has to be changed to top: -285px if you enable the datepicker's button bar. Anyway, for now it works. It would be nice to be able to specify the default position of the datepicker as an attribute.

[lincolnge]

+1