material-ui-next table exceeds container width and it's not scrollable

Question

im starting a new project using react, react-router and material-ui-next.

Im facing a problem that i've trying to find with no success.

table exceeds containing component boundaries

Structure is in this way

return (
            <Paper>
                <Fragment>
                    <CommonToolbar reload={getAnns} />
                    <Typography variant="title">Announces</Typography>
                    <Table className={classes.table}>
                        <TableHead>

styles is defined this way

const styles = {
    root: {
        flexGrow: 1,
        padding: 10,
        margin: 10
    },
    flex: {
        flex: 1,
    },
    input: {
        marginRight: 10
    },
    select: {
        marginRight: 10
    }
}

What im trying to achieve is a table contained on the screen, and if it exceeds the screen, the table should be horizontally scrollable, but always contained inside the Paper Component.

Any hint will be appreciated. Thanks

Regards

Ramil Amparo · Accepted Answer · 2018-06-24 22:33:34Z

2

Can you try adding overflowX: "auto" in your paper container?

JSX:

return (
            <Paper className={classes.paperContainer}>
                <Fragment>
                    <CommonToolbar reload={getAnns} />
                    <Typography variant="title">Announces</Typography>
                    <Table className={classes.table}>
                        <TableHead>

Your styles:

const styles = {
    root: {
        flexGrow: 1,
        padding: 10,
        margin: 10
    },
    flex: {
        flex: 1,
    },
    input: {
        marginRight: 10
    },
    select: {
        marginRight: 10
    },
    paperContainer: { margin: "10px", overflowX: "auto" }
}

answered Jun 24, 2018 at 22:33

Ramil Amparo

6322 gold badges10 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

material-ui-next table exceeds container width and it's not scrollable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related