Datepicker-input popup styling

[alex321]

I am interested in using the bootstrap class "dropdown-menu-right" for the dropdown of the datepicker.

However, the popup for the current datepicker receives the following styling:
<ngb-datepicker class="dropdown-menu" style="display: block; padding: 0.4rem; top: 38px; left: 0px">

Are all of these necessary? I can see why padding: 0.4rem is necessary but I don't see the reason for the other styles, especially left: 0px as it prevents me overwriting it from a containing element (unless I use !important).

A followup question would be whether in general the popups could support adding the "dropdown-menu-right" class.

[pkozlowski-opensource]

The positioning styles you are seeing are, well, positioning info we are adding here:

ng-bootstrap/src/datepicker/datepicker-input.ts

Line 122 in a12c559

positionElements(this._elRef.nativeElement, this._cRef.location.nativeElement, 'bottom-left');

It is needed to make sure that datepicker popup is always positioned exactly right in relation to the input field - regardless of which elements come after <input>.

If I understand you correctly you would like to have datepicker popup positioned to the right rather than left. In fact we do have bottom-left fixed as a position but we could easily an an @Input for this so you could position popup at will. Would it work / be enough for your needs?

[alex321]

That would be great. I could try to submit a PR for this but I haven't setup the project so I can do it over the weekend.

[pkozlowski-opensource]

Go ahead and give a shoot at the PR, it should be quite straightforward one. Setup is easy as well: https://github.com/ng-bootstrap/ng-bootstrap/blob/master/DEVELOPER.md

[alex321]

@pkozlowski-opensource I am actually slightly stuck as I am not sure what approach to take. I've introduce Input() position and am passing that to the positionElement. However, that method is not positioning the items in the way I expected. When I pass 'bottom-right', it is positioning it below the element and then pushing it hostWidth to the right. It is not aligning it right.

I am also slightly confused as the targetElPosition.bottom and targetElPosition.right properties have the same value as the targetElPosition.top and targetElPosition.left in

ng-bootstrap/src/util/positioning.ts

Line 108 in a12c559

switch (placementPrimary) {

,
hence they aren't acutally used in here:

ng-bootstrap/src/util/positioning.ts

Line 149 in a12c559

targetElement.style.top = `${pos.top}px`;

The method seems slightly inconsistent to me.

[pkozlowski-opensource]

@alex321 I see, bottom-right won't work here... so we need to think of another system of expressing positioning / placement. If you've got any preferences, speak up!

[alex321]

@pkozlowski-opensource I am going to pick this on up this weekend. My initial thoughts (based only on my memory of the code):

Shall we use 'bottom-left' (i.e. 'position-alignment') and provide the following:

• for position = top or bottom we can have alignment left and right (aligns left/right borders)

• for position = left or right we can have alignment top and bottom (aligns top/bottom borders)

Can support central alignment as well.

I can modify the service to do that if this sounds agreeable. I will post any other ideas that come to my mind.

[k11k2]

How could we achieve it, by [position] tag?