New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Datepicker header alignment #4443

Closed
rjwijnen opened this Issue Jun 20, 2018 · 7 comments

Comments

Projects
None yet
5 participants
@rjwijnen

rjwijnen commented Jun 20, 2018

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

This comment has been minimized.

gyz0072004 commented Jun 20, 2018

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

@rjwijnen

This comment has been minimized.

rjwijnen commented Jun 28, 2018

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

This comment has been minimized.

rjwijnen commented Jun 28, 2018

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

and adding preserveWhitespaces: true in tsconfig.json.

Please add this to documentation.

@gyz0072004

This comment has been minimized.

gyz0072004 commented Jun 28, 2018

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

This comment has been minimized.

rjwijnen commented Jun 28, 2018

@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 added a commit to adrienverge/ngx-bootstrap that referenced this issue Jul 18, 2018

fix(datepicker): Fix navigation alignment with preserveWhitespaces: f…
…alse

When used with `preserveWhitespaces: false` compilation option in
Angular, the datepicker title elements are misaligned, because spaces
are missing in the justified text.

Since Angular 6, `preserveWhitespaces: false` is the default, so many
users will encounter this bug.

Let's add zero-width spaces in order to have a correct alignment in all
cases.

Closes valor-software#4443

@wafflebot wafflebot bot added the needs review label Jul 18, 2018

@adrienverge

This comment has been minimized.

Contributor

adrienverge commented Jul 18, 2018

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)

@wafflebot wafflebot bot removed the needs review label Oct 11, 2018

valorkin added a commit that referenced this issue Oct 11, 2018

fix(datepicker): Fix navigation alignment with preserveWhitespaces: f…
…alse (#4509)

* fix(datepicker): Fix navigation alignment with preserveWhitespaces: false

When used with `preserveWhitespaces: false` compilation option in
Angular, the datepicker title elements are misaligned, because spaces
are missing in the justified text.

Since Angular 6, `preserveWhitespaces: false` is the default, so many
users will encounter this bug.

Let's add zero-width spaces in order to have a correct alignment in all
cases.

Closes #4443

* fix(main): Reset `preserveWhitespaces` option to default

This commit reverts fee535a and 0478637, which should not be needed
anymore.

`preserveWhitespaces: false` is the default since Angular 6: let's use
the default!
@coloradocolby

This comment has been minimized.

coloradocolby commented Oct 24, 2018

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

Thanks for this!

svetoldo4444ka added a commit to svetoldo4444ka/ngx-bootstrap that referenced this issue Nov 6, 2018

fix(datepicker): Fix navigation alignment with preserveWhitespaces: f…
…alse (valor-software#4509)

* fix(datepicker): Fix navigation alignment with preserveWhitespaces: false

When used with `preserveWhitespaces: false` compilation option in
Angular, the datepicker title elements are misaligned, because spaces
are missing in the justified text.

Since Angular 6, `preserveWhitespaces: false` is the default, so many
users will encounter this bug.

Let's add zero-width spaces in order to have a correct alignment in all
cases.

Closes valor-software#4443

* fix(main): Reset `preserveWhitespaces` option to default

This commit reverts fee535a and 0478637, which should not be needed
anymore.

`preserveWhitespaces: false` is the default since Angular 6: let's use
the default!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment