the style is weird,pls help me

[tangyiming]

import React, { Component } from 'react';
import { httpRequest } from '../../util/network';
import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';
import { Icon } from 'antd';

export default class AboutUs extends Component {
    constructor(props) {
        super(props);
        this.state = {
            info: []
        }

    }

    componentWillMount() {
        this.getAboutUsInfo();
    }

    getAboutUsInfo() {
        httpRequest({
            url: HOST_IP + 'api-perf-load-rest/system/aboutus',
            method: 'GET',
            credentials: 'include',
            headers: {
                "content-type": 'application/json',
            },
        }, (response) => {
            this.setState({ info: !!response.value ? response.value : [] });
        }, (response) => {
            this.setState({ info: [] });
        })
    }

    render() {
        return (
            <div>
                <div style={{margin:"10px 0px 10px 10px"}}>

                    关于我们

                </div>
                <div className="break-line"></div>
                <div>
                    <div style={{ textAlign: "center", margin: "10px 0px 10px 0px" }}><font size="6">我们是谁?</font></div>
                    <div style={{ textAlign: "center", margin: "10px 0px 10px 0px" }}><font size="3">
                        <div style={{ margin: "4px 0px 10px 0px" }}>性能测试平台是红星平台保障部门出品的性能测试服务平台</div>
                        <div style={{ margin: "4px 0px 10px 0px" }}>它服务于公司所有的C，B，E端产品，致力于产品的性能把控和质量提升。</div>
                        <div style={{ margin: "4px 0px 10px 0px" }}>性能测试服务平台包含接口压测，查看压测结果和压测报告，以及查看生产上的应用,组件和接口的消费指数。</div>
                    </font></div>
                    <div style={{ textAlign: "center", margin: "50px 0px 10px 0px" }}><font size="6">我们的历程</font></div>

                    <VerticalTimeline>
                        <VerticalTimelineElement
                            className="vertical-timeline-element--work"
                            date="2011 - present"
                            iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
                            icon={<Icon type="smile-o" />}
                        >
                            <h3 className="vertical-timeline-element-title">Creative Director</h3>
                            <h4 className="vertical-timeline-element-subtitle">Miami, FL</h4>
                            <p>
                                Creative Direction, User Experience, Visual Design, Project Management, Team Leading
                            </p>
                        </VerticalTimelineElement>
                    </VerticalTimeline>
                </div>
            </div>
        )
    }

this is my code ,and looks like this:

[stephane-monnot]

Have you tried to remove all your own stylesheets ? Could you provide a complete example / link ? In my demo, the background is not white : https://stephane-monnot.github.io/react-vertical-timeline/#/demo What is your icon format ? svg ? if not, maybe you have to add style on <img> tag or <i>. Example :

.vertical-timeline-element-icon img {
    display: block;
    width: 24px;
    height: 24px;
    position: relative;
    left: 50%;
    top: 50%;
    margin-left: -12px;
    margin-top: -12px;
}

For the date element, check if you can see this styles in your debug console :

@media only screen and (min-width: 1170px)
.vertical-timeline-element-content .vertical-timeline-element-date {
    position: absolute;
    width: 100%;
    left: 122%;
    top: 6px;
    font-size: 1rem;
}

[tangyiming]

@stephane-monnot first of all,thank you for your patient help. well,the problem still there. 1.i removed all my stylesheet 2.i commented the icon configuration

3.i can see the styles you mentioned above

and then i don't know where is the problem.can you give me the code of your demo?thank you

[tangyiming]

@stephane-monnot i change this width property to 45%,seems solves problem,maybe i need overide the default style sheet

thank you !!!

[stephane-monnot]

You can find the code of my demo here : https://github.com/stephane-monnot/react-vertical-timeline/tree/master/docs or a real usecase on my online resume (https://webエンジニア.com/) here : https://github.com/stephane-monnot/resume/tree/master/src/components/ResumeProjectsBlock and here : https://github.com/stephane-monnot/resume/tree/master/src/components/ResumeWorkAndEducationBlock I hope it helps :)

[joeyparis]

I just want to add that I am also having this same problem and adjusting the element-content width to 44% solves the issue the same way. I don't have much additional context to give but wanted to at least let you know the problem may be affecting others as well. I'll come back if I find another more detailed solution!

Edit That was quick. I found the culprit! This is caused by my css reset, specifically * {box-sizing: border-box}. This leads me to two potential solutions:

Either adjust the width of .vertical-timeline-element-content to 44% or add box-sizing: content-box to .vertical-timeline-element-content. My personal preference would be to adjust the width to 44% because I feel like most people default to using border-box now, however, I don't know what effects that may have on the rest of the style.

Hope this helps! :)

[stephane-monnot]

I will check it when I have time.

[shadowae]

I'm having this exact same error.

[tangyiming]

@shadowae https://github.com/stephane-monnot/react-vertical-timeline/issues/3#issuecomment-355282898 try change the witdh property

[shadowae]

Hi, it didn’t help.

Thanks and Regards, Satish Kumar

On 28 Jan 2019, 9:54 AM +0800, 唐一鸣 notifications@github.com, wrote:

@shadowae #3 (comment) try change the witdh property — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[stephane-monnot]

Could you provide a link to see your bug ?

[shadowae]

the link to my project is : https://github.com/shadowae/resume-site

Thank you

[stephane-monnot]

You have text-align on your .App class. Remove it.

[mohitmohlia]

Can we change the Circle white outline width ?

[stephane-monnot]

Yes, you can with css :

For example :

.vertical-timeline-element-icon {
    -webkit-box-shadow: 0 0 0 10px white, inset 0 5px 0 rgb(0 0 0 / 8%), 0 3px 0 10px rgb(0 0 0 / 5%);
    box-shadow: 0 0 0 10px white, inset 0 5px 0 rgb(0 0 0 / 8%), 0 3px 0 10px rgb(0 0 0 / 5%);
}