Positioning Angular UI bootstrap Datepicker
https://github.com/angular-ui/bootstrap/issues/1012
Ugly hack:
<div class="hackyhack"> <input datepicker-popup="..."></div>Magic CSS:
.hackyhack { position: relative;}.hackyhack .dropdown-menu { left: auto !important; right: 0px; }
Now latest angular-ui 1.2.0 onwards versions have popup-placement option in uib-datepicker-popup settings.
A quick summary from the docs.
popup-placement (Default: auto bottom-left, Config: 'placement') - Passing in 'auto' separated by a space before the placement will enable auto positioning, e.g: "auto bottom-left". The popup will attempt to position where it fits in the closest scrollable ancestor. Accepts:
top - popup on top, horizontally centered on input element.
top-left - popup on top, left edge aligned with input element left edge.
top-right - popup on top, right edge aligned with input element right edge.
bottom - popup on bottom, horizontally centered on input element.
bottom-left - popup on bottom, left edge aligned with input element left edge.
bottom-right - popup on bottom, right edge aligned with input element right edge.
left - popup on left, vertically centered on input element.
left-top - popup on left, top edge aligned with input element top edge.
left-bottom - popup on left, bottom edge aligned with input element bottom edge.
right - popup on right, vertically centered on input element.
right-top - popup on right, top edge aligned with input element top edge.
right-bottom - popup on right, bottom edge aligned with input element bottom edge.
In your case, I think bottom-right will work.
play with this plunker for more details.
This CSS solution may be simpler than altering/hacking your angular .js files:
Wrap your datepicker in a div and then override the margin CSS of the datepicker's .dropdown-menu class:
<div id="adjust-left"> <your-datepicker-here/><div>Then, in the CSS:
#adjust-left .dropdown-menu{ /* Original value: margin: 2px 0 0; */ margin: 2px -Xpx; /* Where X is the amount of pixles to shift it left */}