ng-bootstrap datepicker CSS issue - missing glyphicon

Question

I am using:

Angular 7.2.4
Bootstrap 4.3.1
ng-bootstrap 4.1.0.

After I followed the getting-started guide on ng-bootstrap, my output looks like this:

How can I add the correct style to the Popup button? My html:

<form class="form-inline">
    <div class="form-group">
      <div class="input-group">
        From:
        <input class="form-control" placeholder="{{format}}"
               name="FromDp" [(ngModel)]="fromDateObj" ngbDatepicker #d="ngbDatepicker">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
        </div>
      </div>
    </div>
  </form>

http://plnkr.co/edit/NCNmpm3tlxapH4jZS08F?p=preview

Hi Kovdim, please share your code for this date picker.

Mazdak
– Mazdak

2019-03-07 10:12:54 +00:00
Commented Mar 7, 2019 at 10:12 — Mazdak
– Mazdak, Commented Mar 7, 2019 at 10:12

Akber Iqbal · Accepted Answer · 2019-03-21 12:14:32Z

Check the working demo here

If you open the stackblitz code here - you will see bootstrap css added to index.html & also check styles.css in the stackblitz above to find:

/* Datepicker popup icon */

button.calendar, button.calendar:active {
  width: 2.75rem;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAcCAYAAAAEN20fAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEUSURBVEiJ7ZQxToVAEIY/YCHGxN6XGOIpnpaEsBSeQC9ArZbm9TZ6ADyBNzAhQGGl8Riv4BLAWAgmkpBYkH1b8FWT2WK/zJ8ZJ4qiI6XUI3ANnGKWBnht2/ZBDRK3hgVGNsCd7/ui+JkEIrKtqurLpEWaphd933+IyI3LEIdpCYCiKD6HcuOa/nwOa0ScJEnk0BJg0UTUWJRl6RxCYEzEmomsIlPU3IPW+grIAbquy+q6fluy/28RIBeRMwDXdXMgXLj/B2uimRXpui4D9sBeRLKl+1N+L+t6RwbWrZliTTTr1oxYtzVWiTQAcRxvTX+eJMnlUDaO1vpZRO5NS0x48sIwfPc87xg4B04MCzQi8hIEwe4bl1DnFMCN2zsAAAAASUVORK5CYII=') !important;
  background-repeat: no-repeat;
  background-size: 23px;
  background-position: center;
}

Collectives™ on Stack Overflow

ng-bootstrap datepicker CSS issue - missing glyphicon

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related