Dynamic Material UI Timeline

I am facing a challenge with making the Timeline in Material UI responsive for the first time. Currently, I have it set to align 'alternate', but I want it to switch to align 'left' when viewed on mobile or certain screen widths. I have tried various approaches without success so far. The project is a Next.Js app built with Typescript. Here's the code snippet:

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

Any ideas would be greatly appreciated!

https://i.sstatic.net/FE5Ye.png

typescriptmaterial-uinext.jstimelinetsx

Answer №1

To achieve this functionality, you can utilize the useMediaQuery hook in your code:

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


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

In this scenario, if the viewport size is medium (md) or larger, it will display as alternate, otherwise, it will be set to left.

Answer №2

Yes, I know it may seem like a bit too late, but I still want to share this answer in the hopes of helping others facing the same issue.

In case you are wondering about how to align the timeline to the left instead of having it centered, you can use the code snippet below:

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

By adding Timeline Opposite Content and hiding it as shown in the code, you can avoid the extra space added to the left by ::before and ensure that your timeline is aligned to the left properly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve the svg file either from the DOM or the Object element

Is there a way for me to save or download a .svg file from the DOM? I have integrated my svg file into an Object element and am dynamically updating certain elements within the SVG and customizing it in my Angular 7 application. <object id="svg1" data= ...

typescriptsvgangular7svgpanzoom

The autoimport feature is not supported by the Types Library

My latest project involves a unique library with only one export, an interface named IBasic. After publishing this library on npm and installing it in another project, I encountered an issue. When attempting to import IBasic using the auto-import feature ( ...

typescriptnpm

The Fab Button from Material UI remains beneath the left split-pane

Is there a way to ensure the Fab button is completely visible? The left side often gets hidden under the left pane. I attempted to increase the z-index, but it did not have any effect. View on CodeSandbox <UpperPane> <Fab ...

cssmaterial-uisplitpane

What kind of function possesses additional attributes or characteristics?

I am finding it difficult to define the type for the function foo as demonstrated below: function foo() { do something } foo.boo = () => { do something else } foo("hello"); foo.boo("hello"); This JavaScript code is functioning corr ...

typescript

What is the best way to increment the stock number based on the quantity of items in the cart using Next.js

I am in the process of developing a shop system where customers can order items and save them to the database. I have encountered an issue where I need to calculate the remaining stock after deducting the quantity of items ordered. My API is responsible f ...

javascriptarraysreactjsnext.js

Mismatch between generic types

When working with this code, I encounter a syntax error at m1 and m2. The error message states: Type 'T' is not assignable to Type 'boolean' or Type 'T' is not assignable to Type 'string' interface customMethod { ...

typescript

Issue: The function _lib_getAllUsers__WEBPACK_IMPORTED_MODULE_2___default(...) is not recognized as a valid function

I'm currently following the YouTube series on Next.js by Dave Gray. My goal is to import a function from the file "lib/getAllUsers" https://i.sstatic.net/1SQMg.png However, I'm encountering the following error: Unhandled Runtime Error Error: ...

javascripthtmlreactjswebnext.js

An error occurs when trying to use AWS.Comprehend as a constructor in the aws JavaScript SDK

I'm attempting to utilize the Amazon Comprehend API using the AWS JavaScript SDK. However, I keep encountering Uncaught (in promise): TypeError: undefined is not a constructor (evaluating 'new AWS.Comprehend... ' What am I doing incorr ...

amazon-web-servicestypescriptaws-sdk

What is the best way to have text wrap around an icon in my React application?

I am facing an issue while trying to display the note description over the trash icon in a React app. I have tried various methods but can't seem to achieve the desired effect. Can anyone guide me on how to get this layout? Here is what I intend to a ...

javascripthtmlcssreactjstypescript

Having trouble resolving this issue: Receiving a Javascript error stating that a comma was expected

I am encountering an issue with my array.map() function and I'm struggling to identify the problem const Websiteviewer = ({ web, content, styles, design }) => { const test = ['1' , '2'] return ( {test.map(item => { ...

javascriptnext.jsjsx

Unpacking a props object results in an undefined value

I've been struggling to set up a data-grid in react because I'm facing issues with accessing the data from my props. Whenever I try to access or destructure the prop, it shows up as "undefined" in my console. This problem only arises when the p ...

javascriptreactjstypescriptreact-propsdestructuring

Issue with Angular 2 Observable testing: Trying to use setInterval in an async zone test is not allowed

I am currently in the process of testing a component that relies on a service for making asynchronous HTTP calls. The service returns an Observable, which is then subscribed to by the component. Snippet from the service code: getRecentMachineTemperatures ...

unit-testingasynchronousangulartypescriptjasmine

How can I retrieve the initial truthy value in JavaScript/NextJS for assigning to a property?

Within my NextJS project developed with JavaScript, I am seeking a way to assign a value to a property on a local object dynamically. const localItem = { name: <<value to be set goes here>> }; Handling the data used for setting the property ...

javascriptreactjsnext.js

I'm seeing an issue where my SafeResourceUrl is being displayed as undefined within a function of the identical class

export class ClassName implements OnInit { url: string = "{{'content.url' | translate}}"; urlSafe: SafeResourceUrl; constructor(public sanitizer: DomSanitizer, private translate: TranslateService) { } ngOnInit() { ...

angulartypescript

How can I dynamically display Material-UI's <MenuItem/> within a <DropDownMenu/> using ReactJS?

In my ReactJS + Material-UI project, I am working with an array named colors that contains different color strings such as "white", "blue", and "green. My goal is to render each color string as a <MenuItem/> within a <DropDownMenu/> component ( ...

javascriptcssreactjsmaterial-ui

Implementing advanced checkbox filtering feature in React

Does anyone have experience with creating dynamic Checkbox filtering in React using Material-UI? I'm finding it challenging because the checkbox options are generated dynamically from incoming data and need to be categorized by type of Select componen ...

javascriptreactjscheckboxreact-hooksmaterial-ui

new cookies are created without human intervention

Working on a project in Next.js and using the react-cookie npm package for managing sessions. I am creating a cookie with the key name "token" and assigning the token value as its value. However, an issue has arisen related to cookies where multiple cooki ...

javascriptreactjsajaxcookiesnext.js

Material UI's dark mode primary button disappears on the appbar

I've been experimenting with implementing material-ui's dark mode in a React app. After going through the documentation, I was able to activate it successfully. However, I encountered an issue: when using a basic AppBar with a primary button on i ...

react-nativematerial-uiappbar

Using Lodash to Substitute a Value in an Array of Objects

Looking to update the values in an array of objects, specifically the created_at field with months like 'jan', 'Feb', etc.? One way is to loop through using map as demonstrated below. However, I'm curious if there's a more co ...

javascriptreactjstypescriptlodash

Activate TypeScript EMCAScript 6 support for Cordova projects in Visual Studio

I am interested in utilizing the async/await feature of TypeScript in my VS2015 Cordova project. I have updated "target": "es6" in tsconfig.json Although there are no errors shown in intellisense, I encounter the following error while building the project ...

typescriptvisual-studio-2015taco