Can't align timelineContent

[brmbi]

Describe the bug
Div wraps my custom component and has align-items: center. It has one more div inside, and then my component. I can't set up full width unless I hardcode width value..

To Reproduce
Steps to reproduce the behavior:

1. Create Chrono component
2. For items return array of object only containing {timelineContent: }

Expected behavior
I would expect to be able to modify these simple things.

Screenshots

Desktop (please complete the following information):

• OS: Windows 11 Pro
• Browser Chrome
• Version 117.0.5938.134

[prabhuignoto]

@brmbi can you share the complete code that you are using to setup the timeline

[sashaaldrick]

I have this exact same problem! Here is my code @prabhuignoto:

        title: "November 2023",
        cardTitle: "Test Test",
        cardSubtitle: "Stable Release",
        timelineContent: 
        <div className="justify-start"> 
        <ul>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
        </ul>
        </div>
    },

[brmbi]

You can resolve the issue by adding a class with:

.customContent {
  justify-content: flex-start !important;
  align-items: stretch !important;
} 

And assigning it to the cardText in Chrono component.
So classNames in Chrono component will look like this:

<Chrono
   ... rest of properties,
   classNames={{
                  cardText: styles.customContent,
                }}
 />