I want to have some text on both sides of the timeline from the AntDesign library.
But I also don't won't it to be centered in the middle of the page. I'm using this code as seen below:
<Timeline mode="left">
<Timeline.Item label="Date 1">Test</Timeline.Item>
<Timeline.Item label="Date 2">Some information</Timeline.Item>
<Timeline.Item label="Date 3">More information</Timeline.Item>
</Timeline>
Playground sample: https://codesandbox.io/s/select-with-search-field-antd-4-16-12-forked-n4c5i?file=/index.js
I'm open to any solution. Some CSS would be great, but I don't want to specify the width of my timeline as it should use whatever size it's needed.
Its looks like, not so easy, because antd hardcoded styles for this. And this is known issue(sadenly) https://github.com/ant-design/ant-design/issues/26485
At the moment you can hack this with own css and override antd styles.
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Timeline, Typography } from "antd";
import "./index.css";
ReactDOM.render(
<div>
<Typography.Title level={1}>Header</Typography.Title>
<Typography.Paragraph>
Some information, I somehow want the timeline to be exactly below, and not
centered in the middle of the screen. I was to do this without specifing a
specific width pixel size.
</Typography.Paragraph>
<div className="timeline_container">
<Timeline mode="left">
<Timeline.Item label="Date 1">Test</Timeline.Item>
<Timeline.Item label="Date 2">Some information</Timeline.Item>
<Timeline.Item label="Date 3">
More information. Long text...
</Timeline.Item>
</Timeline>
</div>
</div>,
document.getElementById("container")
);div.timeline_container div.ant-timeline-item-label {
width: calc(10% - 12px) !important;
}
div.timeline_container div.ant-timeline-item-content {
left: calc(11% - 4px) !important;
width: calc(89% - 4px) !important;
}
div.timeline_container div.ant-timeline-item-tail,
div.ant-timeline-item-head {
left: 11% !important;
}DEMO: https://codesandbox.io/s/select-with-search-field-antd-4-16-12-forked-8ynww?file=/index.js