Responsive Material UI Timeline

Question

It is the first time I am using Material Ui and I am having trouble making responsive the Timeline. Currently I am using the aling 'alternate', but I woul like it to be displayed as align='left' when is in a mobile or certain width. I tried diffferent approaches but none worked. The project is a Next.Js app with Typescript. This is the code:

<Timeline align={matches ? 'alternate' : 'left'}>
    <TimelineItem className={classes.primaryTail}>
        <TimelineOppositeContent>
            <h5>2015</h5>
        </TimelineOppositeContent>
        <TimelineSeparator>
            <TimelineDot>
                <FaUniversity size='1.5em' />
            </TimelineDot>
            <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>
            <Paper elevation={24} className={classes.paper}>
                <h5>Some title</h5>
                <p>Some paragraph</p>
            </Paper>
        </TimelineContent>
    </TimelineItem>
</Timeline>

Thanks in advance.

Neïl Rahmouni · Accepted Answer · 2021-08-16T22:59:45.187

1

What you could do is use useMediaQuery, like this:

const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.up('md'));


<Timeline align={matches?'alternate':'left'}>
  ...
</Timeline>

Here if the size is medium (md) or up it'll use alternate and if it's smaller it'll use left.

edited Aug 16 '21 at 22:59

answered Aug 16 '21 at 22:34

Neïl Rahmouni

326
2
10

Thanks @Neil but, I get an error with "up" – Joaquin Palacios Aug 16 '21 at 22:50
@JoaquinPalacios can you send the error message please? – Neïl Rahmouni Aug 16 '21 at 22:52
I just added a screenshot of the error to the original question – Joaquin Palacios Aug 16 '21 at 22:54
Thanks ! I've updated my answer to add the useTheme hook. However if that doesn't solve your issue, maybe try [this answer to a similar question](https://stackoverflow.com/a/67121335/7507743). – Neïl Rahmouni Aug 16 '21 at 23:01

score 0 · Answer 2 · answered Jan 30 '23 at 18:09

Yes, this is too late. Still writing this answer to help people like me.

if you do not add TimelineOppositeContent then, timeline will be visible at center. To Make it left align use below code

 <TimelineItem>
    <TimelineOppositeContent sx={{ display: 'none' }}></TimelineOppositeContent>
    <TimelineSeparator><TimelineDot /><TimelineConnector /></TimelineSeparator>
    <TimelineContent>Eat</TimelineContent>
</TimelineItem>

If you do not add Timeline Opposite content then ::before will add space to the left making timeline at center. So, it is good to have TimelineOppositeContent and hide it.

Responsive Material UI Timeline

2 Answers2