Is there a way to adjust/eliminate the space allocated to the cards?

[JP-CC-Projects]

I think I've tried the available props for configuring dimensions as well as overwriting the css for .TimelineVerticalWrapper. I would really like to be able to control the white space.

[prabhuignoto]

@JP-CC-Projects can you confirm if the timeline is wrapped in a container? can you share the css that is used if there is one.
would be glad if you can share the code via codesandbox etc

[JP-CC-Projects]

Hi @prabhuignoto, thanks for the response. I've tried in a number of divs from flexboxes to 400x500, tried setting card height and width, though I don't deny the real possibility of user error on my part. My box is a bit old and codesandbox makes it freeze, I hope you don't mind if I post the code here:

Component:

import { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { fetchTeamTimeline } from './teamActions';
import { RootState, useAppDispatch } from '../../../redux/store';
import { Chrono } from 'react-chrono';
import MyLoading from '../../common/MyLoading';
import styled from 'styled-components';


interface TeamTimelineComponentProps {
    teamId: number;
}

//Style Overrides:
const CustomChronoWrapper = styled.div`
  .TimelineCardContentWrapper {
    height: 1px !important;
    min-height: 1px !important;
    visibility: hidden !important;
  }
`;

const TeamTimelineComponent: React.FC<TeamTimelineComponentProps> = ({ teamId }) => {
    const dispatch = useAppDispatch();
    const { teamTimeline, isFetchingTimeline } = useSelector((state: RootState) => state.team);


    // Make the API call to return List of TimeLineSeasonGamesDTO
    useEffect(() => {
        dispatch(fetchTeamTimeline(teamId));
    }, [dispatch, teamId]);

    if (isFetchingTimeline) {
        return <MyLoading message="Loading timeline..." />;
    }

    return (
        <div style={{ width: "sm:w-1/3" }}>
            {teamTimeline.length > 0 ? (
                <CustomChronoWrapper>
                    <Chrono
                        items={teamTimeline}
                        mode="VERTICAL"
                        fontSizes={{ title: '.8rem' }}
                        cardLess={true} 
                        hideControls={true} 
                        lineWidth={2} 
                        scrollable={true} 
                    />
                </CustomChronoWrapper>
            ) : (
                <p>No timeline data available.</p>
            )}
        </div>
    );
};


export default TeamTimelineComponent;

App.css:

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 auto;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 0;
}

.read-the-docs {
  color: #888;
}

Please do let me know if I can provide anything more.

[JP-CC-Projects]

For a cleaner example, I've tried using the example code while toggling the cardless prop and trying to manipulate it via css and I find that I can't control the TimelineCardContentWrapper.

import { Chrono } from 'react-chrono';

const data = [
    {
        title: "January",
        cardTitle: "First month of the year",
        cardSubtitle: "Subtitle for January",
        cardDetailedText: "Some details about January",
    },
    {
        title: "February",
        cardTitle: "Second month of the year",
        cardSubtitle: "Subtitle for February",
        cardDetailedText: "Some details about February",
    },
];

const TestTimeline = () => {
    return (
        <div>
            <Chrono
                items={data}
                mode="VERTICAL"
                fontSizes={{ title: '.8rem' }}
                cardLess='true'
                hideControls='true'
                lineWidth='2'
                scrollable='true'
            />
        </div>
    );
};

export default TestTimeline;

[cwikio]

could someone answer this one please? I have the same issue

[JP-CC-Projects]

@cwikio
I've looked into this and I managed a workaround which I still find unsatisfying. I created a fork where I adjusted the white spaces in vertical src timeline-vertical.styles.ts, timeline.style.ts, layout.module.scss, and timeline-card-content.styles.ts.html.

master...JP-CC-Projects:react-chrono-cfb:master

CTRL+F for "padding", and ignore the added files which were uploaded for a Vite project build.

It took many hours to narrow down where in the source code the white spaces were being set because the source files are large and I gave up on dom manpulation of the white spaces b/c generated tag names are kinda random for the dom objects.

Additionally, removing other white spaces will break how Chrono appears on the screen.

Here's how I deployed it
https://cfbcentral.up.railway.app/228/timeline

I recommend against doing what I did and writing your timeline component from scratch if you want to change the white space. For example, the timeline is broken on mobile and I haven't found a fix for this.