Pagination controls are misaligned after adding Bootstrap

[ghost]

Angular 2 version:
Angular 2.0.0-beta.12
ng2-pagination version:
0.0.1-beta.3
Description of issue:
I believe the latest version of Bootstrap (3.3.6) messes up the alignment of the pagination controls.
Steps to reproduce:
Demo. Notice I added bootstrap. After this, the previous and next buttons are misaligned.
Expected result:
Buttons should remain aligned.

In a naive attempt to fix this, I added Foundation but that didn't help.

[jayhahn]

This is because this repo's ".pagination" class style conflicts with bootstrap's ".pagination" class. As a temporary fix, I just edited "node_modules/ng2-pagination/dist/template.js" to use ".ng2-pagination" class instead. This will at least show you the style that the author had set up.

Not sure how it will work with your build process though...

[ghost]

Thanks. Right now I'm using ng2-pagination-bundle.js as in your demos, but I think it doesn't get updated if I simply change template.js. Maybe I'm missing something here.

Will you push your change in a new release in order to get your fix?

[michaelbromley]

Hi, thanks for the report. I'll rework the class names and styling to avoid conflicts. Hopefully I'll have time to push out a fix later this week.

[ghost]

That would be great. Thank you very much!

[michaelbromley]

@rsmith31415 So I've just got a bit of time to work on this now. First of all, if for some reason you want to change something about the hard-coded template and you are using the systemjs bundle, then you can always edit this line in the ng2-pagination-bundle.js file. Having said that, it is not a great idea if you plan to ever update via a package manager.

Also I just published a new version, 0.0.1, which changes the default class to .ng2-pagination which should solve your issue

[ghost]

Thank you. I already tested and works great. The only thing I would like to see is not to have Foundation as a hard dependency in order to get the correct styles. The reason is that, right now, if I include Foundation, other HTML elements are also modified.

[michaelbromley]

Foundation is not a hard dependency. I just borrowed their markup for the default template. Now you can style it however you want, or even just swap out the default template for your own custom template that fits better with your CSS framework of choice.

[ghost]

Sure. I didn't mean to say that it was a hard dependency in that sense. The problem I see with Foundation is that it styles very aggressively some elements (not sure if it is primarily focused on mobile platforms), so if I want to use your library quickly and make it look like your demos, I just include the foundation style sheet and that works as long as you don't include other elements (inputs, textareas, etc). Otherwise, users might be wondering why input fields are being modified that way automatically (width: 100%; box-shadow, border-color, etc)

[michaelbromley]

The lib comes with CSS already defined to make it look like the demo - as far as I can tell you shouldn't need to include the Foundation CSS to get styling on the controls.

If this is not the case for you, please let me know and I'll look into it.

[ghost]

I think the problem is that I can't figure out how to show the numbers in the pagination controls. These numbers are the ones that have some styles. Based on the simple example in the documentation, I thought the numbers should appear automatically. Actually, the bare-bones demo doesn't show numbers in the pagination controls. Do you know why?

[michaelbromley]

Ah, I see what is going on - the template is responsive, so the numbers are not show on small screen sizes.

[ghost]

Oh... you're right 👍

[AtoMaso]

"angular2": "^2.0.0-beta.17",
"bootstrap": "^3.3.6",
"es6-shim": "^0.35.0",
"jquery": "~2.2.3",
"moment": "^2.13.0",
"ng2-bootstrap": "^1.0.15",
"ng2-file-upload": "^1.0.0-beta.1",
"ng2-pagination": "^0.1.0",    
"reflect-metadata": "^0.1.3",
"rxjs": "^5.0.0-beta.7",
"systemjs":  "^0.19.26",
"typings": "^0.8.1",
"zone": "^0.3.4",
"zone.js": "^0.6.12"

Description of issue:
Cannot read property 'totalItems' of undefined of the args[0] in the execution of the PaginatePipe.transform (ng2-pagination-bundle.js

[AtoMaso]

The args[0] in the ng2-pagination bundle methods should be an array where config variable is the array not the first element of the array. ( config = args[0] is wrong, it should be config = args[0])

[michaelbromley]

@AtoMaso Hi. This is because of a breaking change introduced in beta.16 with the way pipes work. I have created a separate issue to track this one: #26.

[AtoMaso]

Sorry it should be var config = args, so replace all instances of args[0] with only args.