Pagination: becomes broken when it is placed inside a flex container.

[vannizhang]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

The calcite-pagination component becomes broken when I have it placed inside of flex container (a div element that has display set to flex).

Here is what is an example of what I see:

Expected Behavior

It should just render as what we see from the example of the doc:

Reproduction Sample

https://codepen.io/vannizhang/pen/abxmKxV

Reproduction Steps

1. Open the codepen link that I provided above.
2. You should see two calcite-pagination components there.
3. The first one looks broken as it it placed inside a flex container.

Reproduction Version

2.6.0

Relevant Info

Windows 10. Chrome 122.

Regression?

1.4.3

Priority impact

p2 - want for current milestone

Impact

Several pages of the the Living Atlas Website uses this component:

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 Living Atlas

[macandcheese]

As a workaround you can set width: 100% on the Pagination element: https://codepen.io/mac_and_cheese/pen/XWQNrMd

[geospatialem]

Related: #8420

[gpbmike]

Does anyone have a way to horizontally center the pagination while using the full container width?

edit: n/m it looks like justify-content: center; does the trick.

[nwhittaker]

As a workaround you can set width: 100% on the Pagination element: https://codepen.io/mac_and_cheese/pen/XWQNrMd

Field Maps is also interested in a fix for this issue. @macandcheese, any idea for a workaround that allows for background, border, outline, etc… styles to hug the pagination buttons?

Observed	Expected

[macandcheese]

I think this could be a limitation of the current set up of the component - without a set width it will render in the "smallest overflow configuration", so we might need to look at some adjustments there.

Because we currently set the flex display directly on Host, you can use justify-content to achieve centering, the closest you can get without a defined px width is centered within a full-width container or with a wrapping container with a set width: https://codepen.io/mac_and_cheese/pen/rNXNYyz?editors=1000

[minhiu]

Bringing this issue back to attention, as it produces lots of unwanted margin and breaks many places in our app (Business Analyst Web App team).

Currently this is our workaround, to remove the unwanted margin produced from Calcite Pagination:

  // Calcite 3.0 pagination width efficiency improvement
  // Remove when fixed from Calcite
  // Issue to track: https://github.com/Esri/calcite-design-system/issues/8942
  private _improvePaginationWidth(): void {
    // This workaround will need to force Pagination to only have 5 items or less (min 320px)
    // Since pagination sizing is based on breakpoints of width
    this._pager.style.width = "320px";
    // Create a ResizeObserver to adjust the margin-right of the pagination to remove unwanted margin
    // Since the shadowRoot has the correct width of the pagination
    this._pagerRO = new ResizeObserver((entries) => {
      const entry = entries[0];
      if (entry) {
        const { width } = entry.contentRect;
        if (width < 320) {
          this._pager.style.marginRight = `-${320 - width}px`;
        }
      }
    });
    shadowRootReady(this._pager).then((root) => {
      this._pagerRO.observe(root);
    });
  }