How to align AntDesign Timeline to the left

user_1832471 0
Viewed 534

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.

antd reactjs less css javascript
1 Answers

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

user_47774440
Related