I am currently in the process of creating a timeline component that consists of four main elements.
While I have successfully added these components, I am unsure how to align them dynamically based on the data provided. The goal is to display text on both the left and right sides of each circle.
One suggestion is to design your "TimelineEvent" components to contain both the data and information for each event (and pass them as props).
To maintain vertical alignment, using a table structure might be beneficial:
#wrapper {
display: inline-block;
}
table {
border-collapse: collapse;
}
.timeline-event {
height: 100px;
}
.timeline-event:first-of-type .timeline-dash {
top: 50%;
height: 50%;
}
.timeline-event:last-of-type .timeline-dash {
height: 50%;
}
.middle-cell {
position: relative;
}
.circle-wrapper {
position: relative;
width: 20px;
}
.circle {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-color: tomato;
border-radius: 100%;
z-index: 2;
}
.timeline-dash {
position: absolute;
width: 50%;
height: 100%;
top: 0;
border-right: 1px solid black;
z-index: 1;
}<div id="wrapper">
<table>
<tr class="timeline-event">
<td class="data">
Event Data<br/>
Second Row
</td>
<td class="middle-cell">
<div class="circle-wrapper">
<div class="circle"></div>
</div>
<div class="timeline-dash"></div>
</td>
<td class="info">
Event Info
</td>
</tr>
<tr class="timeline-event">
<td class="data">
Event Data<br/>
Second Row<br/>
Third Row
</td>
<td class="middle-cell">
<div class="circle-wrapper">
<div class="circle"></div>
</div>
<div class="timeline-dash"></div>
</td>
<td class="info">
Event Info
</td>
</tr>
<tr class="timeline-event">
<td class="data">
Event Data<br/> Second Row<br/> Third Row
</td>
<td class="middle-cell">
<div class="circle-wrapper">
<div class="circle"></div>
</div>
<div class="timeline-dash"></div>
</td>
<td class="info">
Event Info
</td>
</tr>
</table>
</div>I'm currently designing a mini-email platform that serves as a prototype rather than a fully functional application. The HTML file contains placeholder emails that have been styled to appear presentable. I've implemented an input bar and used Jav ...
Encountering an issue with MUI Select (multiple) within a Formik form. Let's say there is a task stored in the database with properties taskName and assignTo (an array of staff). The aim is to create a form where the assignTo values can be updated/cha ...
Alert: Avoid calling setState (or forceUpdate) on an unmounted component. While this won't cause any issues, it could suggest a memory problem in your application. Make sure to clean up all subscriptions and async tasks in the componentWillUnmount met ...
Can someone help me with a problem I'm facing while trying to display different code snippets depending on the existence of a prop? The current code renders both cases regardless. Can anyone spot where the issue might be? { this.props.isParallax ...
As a newbie in JavaScript, I've been trying to find answers to my questions, but the solutions I've come across are quite complex for my level of understanding. One specific issue I'm tackling involves creating a grid of divs using user inpu ...
I currently have an array containing 1000 objects with various properties, including "company," "owner," and "city." { "company": "Seattle Sutton", "owner": "Gartling", "city": "Des Moines" ...
After creating a simple SVG of a red circle to serve as the list-style-image for my website, I discovered the concept in this Stack Overflow response: The solution worked seamlessly across all browsers except Internet Explorer. In IE, the SVG image render ...
I'm encountering a hydration error related to an icon within a link, Here is the error message: Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching <svg ...
I am working with a grid of accordions presented like this: <body> <div> <div class='accordion-left'> <h3>Left 1</h3> <div></div> </div> <div ...
Currently, I am facing an issue while trying to align 2 forms side by side using the Bootstrap grid system. Despite following the documentation exactly, it doesn't seem to work and I can't figure out why. Here is the HTML code I'm using: ...
Why does the First Menu Item (.chosen) jump in Chrome Browser when refreshed? It seems like it's changing the Padding-Right and Padding-Bottom. Please review the code and help me solve this irritating issue. It works fine in Firefox. <body> ...
I am having an issue with rendering a list of posts on the index page. I can successfully create posts by clicking the 'Add Post' button and submitting the form on the /posts/new route. However, the list of posts is not showing up on the index pa ...
Here's a component I'm working with: const SelectFieldOptions = ({ editedField, fieldMethods }: any) => { const items = editedField.fieldOptions.map((e: any) => { return ( <div key={e.id}> <input type="text" on ...
I am striving to achieve the desired outcome but with the text in front of the input vertically aligned with the text after the input. https://i.sstatic.net/0WTfk.png Here is what I have created so far to accomplish that: <div class="space-x-2 fl ...
As a newcomer to React and programming in general, I may be overlooking an obvious mistake here, for which I apologize. While working on my first components in React, I have been heavily relying on sample code from Material-ui. I managed to successfully bu ...
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="100%" height="131" border="0" cellspacing="0" cellpadding="0"> <tr> <td wid ...
I'm trying to create an element with a breathing animation effect that also follows the cursor. However, I'm running into an issue where the code only works if I remove the animation in CSS. What am I doing wrong? It seems like your post is mos ...
During the process of building a website, I encountered a challenge in making buttons work seamlessly with other elements to ensure uniformity in appearance. This issue often arises in menus, where some buttons are functional while others are simply li ...
I am a beginner in the world of coding and I am currently experimenting with flexbox to create the layout for my website. However, I am facing a challenge where I need to overlay some text and an image on top of the pink rectangular section that is part of ...
Is it possible to download Google fonts and link them offline for a localhost webpage? ...