Datepicker header alignment

[rjwijnen]

Bug description or feature request:

The part in bs-datepicker-navigation-view is not aligned properly. The arrows and date are not centered.

Plunker/StackBlitz that reproduces the issue: https://ngx-bootstrap-ykrrbh.stackblitz.io/

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 3.0.1

Angular: 6.0.5

Bootstrap: 3.3.7

Build system: Angular CLI, System.js, webpack, starter seed: Angular-cli 6.0.8

[gyz0072004]

Faced same issue setting:
ngx-bootstrap: 3.0.0
angular/core: 6.0.3
angular/cli: 6.0.7
bootstrap: 3.3.7

[rjwijnen]

To add: I played with it and think it has something to do how angular creates the template code. When i copy the div to VS code and format the code en re-add it to the browser it works.

[rjwijnen]

I fixed it with:
Main.ts
platformBrowserDynamic().bootstrapModule(AppModule, { preserveWhitespaces: true });

and adding preserveWhitespaces: true in tsconfig.json.

Please add this to documentation.

[gyz0072004]

Hi @rjwijnen ,

Actually from my side, the title was aligned properly using angular 5.2.9 and angular-cli 1.5.0. I believe this is a issue related to angular 6 compatibility.

[rjwijnen]

@gyz0072004 as of Angular 6 they set preserveWhitespaces to false from default. That's why you need to enable it. I hope @valorkin can fix this, so we don't need to force preserveWhitespaces to true.

[adrienverge]

I have created a fix at #4509.

While waiting for review, you can apply the following patch to your repository: ngx-bootstrap-datepicker-issue-4443.patch
(I had to rename it to .txt to upload it on GitHub, but it's a .patch)

[jrnxf]

platformBrowserDynamic().bootstrapModule(AppModule, { preserveWhitespaces: true });

Thanks for this!