styling issue input-group + datepicker


Bootstrap’ input-group + input-group-addon are styled like :not(:first-child) :not(:last-child). So the content of the input group is important.

Problem: The ngb-datepicker should NOT be inside the input-group in my opinion, because the bootstrap styling breaks.

<div class="input-group"> <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [displayMonths]="displayMonths" [navigation]="navigation" ngbDatepicker #d="ngbDatepicker"> <button class="input-group-addon" (click)="d.toggle()" type="button"> <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/> </button> </div>


  1. click the input-group-addon calendar icon
  2. datepickers opens, thus changing the DOM in the input-group
  3. results: the input-group-addon has 2px border left instead of 1px

possible solution:

  • make a target ‘datepicker wrapper’ where it can render inside, bound to that input

1 possible answer(s) on “styling issue input-group + datepicker

  1. This could be also solved by using the new container="body" option introduced in #1857 (to be released today). This way a datepicker window wouldn’t be a sibling of an <input> but added as a child of the document’s body .

    Closing as a duplicate of #1380