0

I have encountered an issue with Material-UI TablePagination component buttons 'escaping' from under the cursor due to a change in the width of the displayed rows label:

enter image description here

Here is a modified example from Material-UI documentation. To reproduce the issue, click on the 'Next Page' button and see it shift to the right.

What is the canonical way to prevent the button from moving?

tonysepia
  • 3,340
  • 3
  • 27
  • 45

1 Answers1

1

This turns out to be mostly a CSS issue.

The example in the Material-UI docs does not have this problem, because it is effectively aligning the table pagination to the right. Since the arrows have a consistent width (and there's nothing to their right) if you align the pagination to the right then they never move.

What you have done in your example is override the spacer that is used to achieve this "right" alignment.

The pagination component is set to display: flex and uses the default horizontal direction. The first element, the "spacer", is an empty element that comes with a default flex-grow property of "1", i.e. it will grow into any available extra space at a normal rate. It effectively "eats" the empty horizontal space in the footer, growing and thus pushing the other elements to the right.

You have changed the spacer's flex-grow property to 0, so it does not eat up that extra space and the pagination components effectively align to the left, which means the pagination arrows' position depends on the widths of the components that come before it, which means that it can change depending on the page.

(side note: they could have achieved almost the same effect by setting the flex container to justify-content: flex-end)

If you do want the pagination on the left, you will need to make the items to the left of the pagination arrows a fixed with if you do not want the positions of the items to their right to adjust. For instance:

const StyledTablePagination = withStyles((theme) => ({
  spacer: {
    flex: "0 1 0%"
  },
  caption: {
    width: "75px"
  }
}))(TablePagination);
tmdesigned
  • 2,098
  • 2
  • 12
  • 20
  • thank you for your answer. When I add the width parameter to the CodeSandbox example, it appears to affect BOTH the "rows per page" dropdown and the "1-5 of 30" caption. What is problematic is that the select component "runs away" from its caption, damaging the layout. Is there a solution that would target just the "1-5 of 30" caption, without breaking the layout? Where did you get the "caption" class name? – tonysepia Jan 23 '21 at 14:46
  • I have created a pull-request in material-ui project to make these two labels independently addressable. I think at present they both have the same class, so can't be modified individually: https://github.com/mui-org/material-ui/pull/24568 – tonysepia Jan 23 '21 at 15:22
  • Looks like the PR has been accepted, and we will be able to address styles of the underlying components individually. – tonysepia Jan 23 '21 at 16:23
  • Wow, good initiative. That's a quick PR and approval. You could probably target one or the other with :last-child or :last-of-type, but separate classes is better. – tmdesigned Jan 24 '21 at 07:39