calcite-pagination does not use its available space

[MikeTschudi]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

calcite-pagination changes its display based on width, but it's not clear how to control this. E.g., I'd like to center the pagination component under a gallery. I specify a width for it and centering margins, but I see that the component is not filling the width that I give it. If I decrease the width, less of the pagination is shown even though there's available space:

• width 500px:
• width 400px:
• width 300px:
  (background color is applied to pagination component to show its width)

I've also tried using a containing div, but get the same non-filling behavior. (https://codepen.io/miketschudi/pen/GRzzwpJ?editors=100)

Expected Behavior

I expect the component to fill the available width.

Reproduction Sample

https://codepen.io/miketschudi/pen/XWOOxOZ?editors=100

Reproduction Steps

1. Open the codepen and you'll see that the component is not filling its space because the component's background is light blue.
2. Change the width of the component, and you may see changes in the page link display, but it will still not fill the available space.

Reproduction Version

2.0.0

Relevant Info

Windows 10 Chrome 119.0, Firefox 120.0

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

Minor impact--just UI misalignment that I'm sure to receive a bug report about. :-)

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Solutions

[driskull]

@MikeTschudi this works: https://codepen.io/driskull/pen/qBggLNZ?editors=100

[driskull]

@macandcheese do you think it would be nice for the pagination to have an alignment property or something similar?

[SkyeSeitz]

Could Pagination be centered by default? I believe left alignment would still be possible as an override if needed.

[SkyeSeitz]

Also @driskull could you remind me if there were key limitations with Pagination populating as many pages as it could afford in the available width verses a prescribed number of pages per breakpoint?

[MikeTschudi]

@MikeTschudi this works: https://codepen.io/driskull/pen/qBggLNZ?editors=100

Thank you, @driskull--that works perfectly in my app!

Should the pagination fill the space given it? (I no longer need it for my app--just curious.)

[driskull]

could you remind me if there were key limitations with Pagination populating as many pages as it could afford in the available width verses a prescribed number of pages per breakpoint?

Not all pages are the same width so we can't do that. We would need each page to be the same width.

[driskull]

Could Pagination be centered by default? I believe left alignment would still be possible as an override if needed.

Could be if thats what we decide.

[driskull]

Should the pagination fill the space given it? (I no longer need it for my app--just curious.)

The pagination does fill the width its given, but without making each page's padding or width adjustable we can't fully fill the items within it.

[MikeTschudi]

Since this issue has been resolved by Matt, may I close it?

Skye's proposal can be a new issue for discussion.

[driskull]

@SkyeSeitz @macandcheese would like your thoughts on this one.

If we should have a property for alignment or not.

The only other way to not have alignment not matter is if we stretch something within each page (width/padding/spacing/etc) to make it fill the space.

[macandcheese]

It seems like we are leaning that way based on the current state - where the pagination container fills the width but does not fill that width with additional pages. So in this context, alignment property makes sense to me.

I do think making the component automatically adjust - displaying as many "pages" as possible within a container size - would be nice, but out of scope for now.

[driskull]

I do think making the component automatically adjust - displaying as many "pages" as possible within a container size - would be nice, but out of scope for now.

I originally had this in the responsive PR but design wanted each page's padding to be consistent.

[driskull]

Closing issue. @SkyeSeitz feel free to open a new one for any ui enhancements.

[SkyeSeitz]

Awesome - Thanks, @driskull. Opened an issue for the discussed behavior.