Avoiding stepper linking lines using CSS

I've created a React stepper component that takes in an array of steps and allows for skipping disabled steps. I'm looking to create a skip dotted line using CSS similar to the example shown below.

https://i.sstatic.net/cxV71.png

Here's my current stepper design:

https://i.sstatic.net/JgSbc.png

This is the expected design with CSS:

https://i.sstatic.net/kug1B.png

You can find the code on Stackblitz

Please check out Step.jsx for the styling implementation.

Any advice or suggestions would be greatly appreciated!

javascriptcssreactjs

Answer №1

Consider using the .skip class on a specific li element and include the following CSS:

CSS

.skip:before{
    content: "";
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: -10px;
    border: 1px dashed;
    border-top: 0;
    border-radius: 0 0 100% 100%;
}

OUTPUT

https://i.sstatic.net/NeI0I.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Alternative method to jQuery's "find" selector

$('.wrapper a').filter('a'); //returns all anchors I am trying to find a way to select all anchor elements using a specific selector. The issue is that the find method only looks at descendants, so I need an alternative solution. Any s ...

javascriptjquery

What is the best way to use JQuery to clear a browser field and then trigger a function?

I have created a form on an HTML page with various fields for the user to fill out, such as "name", "surname", and a textarea. Additionally, I added a button with the id Click: <input type="button" name="button" value="Click" id="cliccami"> To enha ...

javascriptjquery

The information sent via POST (via fetch JavaScript with PHP8) is not being received by PHP8

My PHP8 server is not receiving the data I am sending. When trying to insert a new song into my API, an error occurs and in the console, I see an object with POST as an empty array. fetch("http://localhost/api.audio-player/",{ method: 'POST&apos ...

javascriptfetch

Mobile display exhibiting glitches in animation performance

I have implemented an animation in the provided code snippet. const logo = document.querySelector('.logo'); const buttons = document.querySelectorAll('.loadclass'); const html = document.querySelector('html') const cornerme ...

javascripthtmlcss

Fetching dynamic data using AJAX in Laravel

Working on creating a finder with advanced search capabilities, I've made progress but now facing an issue with retrieving the third part of my search query. Approach Select a category Select a subcategory Select specifications of products in the s ...

javascriptphpajaxlaravelsearch

Problems with Styling the Header Navigation

Currently facing two CSS challenges on techprosecurity.com that have been difficult to resolve. The header NAV menu displays a slight space when hovering over links that are not active, and I've searched for a solution without success. For instance: ...

jqueryhtmlcssresponsive-design

Sending information as properties from one component to another's state

As I work with two components, Album and Songs, my goal is to pass the id of the Album component as a prop to the Song component. However, I want to achieve this without rendering the Song component explicitly like so: <Songs albumId={this.state.id} /& ...

javascriptreactjs

Protractor tests are successful when run locally, but encounter failures when executed on Travis-CI

I recently integrated end-to-end tests using Protractor into my AngularJS application. Testing them locally showed that they all pass, but upon committing to GitHub and Travis for CI, most of the tests fail. The failing tests seem to be those requiring na ...

javascriptangularjsprotractortravis-ciangularjs-e2e

Enhance the look of your MaterialUI React Table with customized Diver Color and Page Dropdown hues. Elevate

I need some assistance with changing the divider color in my TableBody and also the background color of the Rows per page dropdown menu. Any help would be greatly appreciated, thank you! Currently, I am using styled-components ThemeProvider to toggle the ...

reactjsmaterial-ui

Tips for keeping a checkbox checked on page refresh in React JS

I am facing an issue where the checkbox, which was checked by the user and saved in local storage, is displaying as unchecked after a page refresh. Even though the data is stored in local storage, the checkbox state does not persist. The code I am using i ...

javascriptreactjscheckboxlocal-storage

Tips for preventing repetitive patterns in React form design

With the useState Hook, I plan to update the form dynamically with each keystroke. However, this means adding an onChange event listener and a function for each input field. This approach results in numerous repetitive functions. How can I optimize this ...

reactjs

What is the best way to create HTML dynamically using a function in JavaScript React and then display it at a

Having some trouble with creating a periodic table in HTML using the this.periodicTable[] data and displaying it later. I initially hand-coded everything in the render() section of HTML, but then decided to generate it dynamically instead. However, I' ...

javascripthtmlreactjshtml-generation

Unit tests manipulating JavaScript functions to return undefined values

Currently, I am in the process of testing some JavaScript functions within a larger React application. These functions heavily utilize the module pattern, which leads me to believe that my misunderstanding lies within this pattern. The script I am testing ...

javascriptreactjsunit-testingnode-modules

Issue with block code causing conditional rendering error in Next.js

I've encountered an issue with conditional rendering in Nextjs. It seems to work fine when I have just one component, but as soon as I try multiple components within the block of code, it stops working. -> Works: const MyComponent = () => { r ...

reactjsnext.js

What other aspects of mobile design could mobile-specific CSS be focused on aside from screen size?

As a newcomer to responsive web development, I have found myself puzzled by media queries. For example, how does the following code snippet target specifically iPhones with a max-device-width of 320px: @media screen and (max-device-width: 320px) {} Woul ...

androidioscssiphonemobile

Is it possible to obtain a reference to the object with _.find? What is the correct way to update a property of the resultant object

When using lodash find to query an object from an array and then setting a property of that object, the array remains unchanged when printed out. I would appreciate feedback from someone with more experience in handling objects with lodash in JavaScript. ...

javascriptnode.jslodashco

Show a list of posts within the same category as the current post

Seeking advice on how to dynamically display a list of WordPress posts based on the category of the current post page. For instance, when viewing post333.html and it belongs to the Drinks category. Would like to showcase other posts within the same categ ...

javascriptphphtmlwordpress

Unexpected TypeError thrown by a simple react-cube-navigation demonstration

Looking to utilize the react-cube-navigation component, available here. Encountering a TypeError when attempting to run the provided example, React throws an error: TypeError: props.rotateY.to(function (x) { return "scale is not a function. ( ...

javascriptreactjsnpm

Create a cohesive user experience by implementing the same CSS animation when hovering over two distinct elements

For a learning exercise, I attempted to create an animation. My goal was to have the circle trigger an animation when hovered over, while also revealing the text in the .hide element. However, as soon as I hover over the circle and then move my mouse onto ...

htmlcss

React Native error: Attempting to convert an undefined value to an object

I'm trying to fetch data like this: useEffect(() => { async function getData() { const response = await fetch('https://hasanadiguzel.com.tr/api/kurgetir'); const json = await response.json(); setData(json ...

javascriptreactjsreact-nativereact-hooks