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

[sasipaants]

+1

[smajl]

+1 and customizable left and right icons...

[ghislainf]

+1

[pmaoui]

Was looking for that option ... so +1

[mg1075]

+1

[natpinit]

+1

[germanger]

+1

[prawn-cake]

+1

[OakBehringer]

+1

[smajl]

Just a side note to this "problem": I personally ended up using combo of UI-Bootstrap and AngularStrap. You can do that by carefully cherrypicking the right modules from each library (so there are no conflicts). I am using datepicker from AngularStrap now, which is IMHO much less cumbersome.

[mikhail-tsennykh]

+1. Also needed to have it on top, solved it similar to @simonedavico. I would love to be able to place datepicker on all sides, including corners of input, or maybe get it to determine best placement automatically, that would be sweet too!

[boroth]

The simplest way to solve this would be to allow a dynamic class on the datepicker popup. That way we can position it however we'd like with CSS?

[pbellesa]

+1

[zontafil]

+1

[reinaldorauch]

+1

[c-johnson]

+1

[TravisMeyers]

+1

[rvanbaalen]

I know this is an old topic but please stop all the +1's. We're aware of this issue and many others.

Adding +1's only adds noise to the conversation.

[vitaly-t]

Ok, so what people should do to convince the authors to implement it, after 2 years of +1 pestering?

[rvanbaalen]

@vitaly-t I think you're missing the point of an open source project. This is a free and open source project. We, the authors, are spending most of our free time to provide you with awesome tools that most of you use commercially and safe (and money) time with. That's all cool 👍

We're not an organisation that builds features on demand. There simply are too much requests to satisfy everyone. That does not mean we won't do it. It only indicates that we will get to it, when we get to it.

In the meanwhile, the spirit of open source software is to share and collaborate. Everyone is free to dig into the source of UI Bootstrap and implement this specific feature. Send us a PR and we're happy to merge it in the next release. If no one is willing to do that, I guess your only option is to wait until one of the authors finds time and energy to work on this specific feature.

[rvanbaalen]

Related: #375

[hxtpoe]

PR: #3782

[boroth]

Came here to post another workaround, just to be greeted with a pull request!

Someone give this man a cookie! (and a merge into master, please 👍 )

[rammoozz]

needed this for right:0 +1

[blacksoulgem95]

+1

[icfantv]

Please do not only add +1 to issues as it adds no value to the discussion. We welcome any added insight and/or contributions so please feel free submit a PR that allows for this feature.

That said, this is more a job for a $position type service so the entire library could benefit. If you need inspiration, take a gander at the Tether library.

[icfantv]

Closing in favor of #4762.

[arsu-leo]

Until this #5444 goes on, my simple solution was to add a new atribute to the directive uibDatepickerPopup:
useRightMargin: '=?',
and on the $watch('isOpen'), where !scope.disabled of UibDatepickerPopupController just added this:

      if(scope.useRightMargin){
          element_position = $position.position(element);
          scope.position.left = scope.position.left + scope.position.width - 246; 
          //Arbitrary width: 246 = datepicker width(286) - calendar button width (40)
      }

[anil-kk]

The positioning problem can be noticed mostly with mobile devices, and it can be annoying, other case it might not be a big problem.
After searching and trying out different solutions, The below CSS fit best for me, hope this can save some time to others who are looking out for solutions.

@media only screen and (max-device-width: 480px) { .dropdown-menu { left: -38px !important; } }

[jkieley]

+1

[AntonRatnick]

+1

[icfantv]

@AntonRatnick, please be respectful of the previous request made to not just add +1 to issues. As people seem to unable to follow instructions, I am locking this issue.