Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Stepper] `alternativeLabel` makes text not reach the edges of the container

See original GitHub issue

When ‘alternativeLabel’ is applied to a stepper the connector is made a child of the the step succeeding it and is absolutely positioned. By each step evenly spacing in the bounds and being centered it no longer takes up the whole space it is given (or at least from a viewing perspective).

What it looks like now: Screen Shot 2021-01-21 at 10 37 52 AM

What it should look like: Screen Shot 2021-01-21 at 10 46 59 AM

I was able to accomplish this by not making the connector a child of the succeeding step (using the same layout as the non-alternativeLabel variant, removing flex: 1 on each step, removing all the alternativeLabel styles on the connector, and adding margin-top: theme.spacing(1.25) to the connector.

I could potentially pick this issue up, but I’m sure there was reasons for the absolute positioning method so wanted to open a discussion on it first to see what else may need to be considered.

Issue Analytics

State:
Created 3 years ago
Comments:9 (4 by maintainers)

Top GitHub Comments

2reactions

josuemycommented, Jun 13, 2022

Hi, would it be possible to update the codesandbox examples? They currently show this error:

Thanks!

1reaction

amaidahcommented, Jun 15, 2022

Hi, would it be possible to update the codesandbox examples? They currently show this error:

Thanks!

This would be super helpful for us too!

Top Results From Across the Web

[Stepper] `alternativeLabel` makes text not reach the edges of ...

When 'alternativeLabel' is applied to a stepper the connector is made a child of the the step succeeding it and is absolutely positioned....

How to override StepLabel default label? - Stack Overflow

I tried to set labelContainer : {fontSize: 0, and display: 'none'} in the CustomStepLabel but it did not make any changes to the...

React Stepper component - Material UI - MUI

Steppers convey progress through numbered steps. It provides a wizard-like workflow.

@mui/material | Yarn - Package Manager

Fast, reliable, and secure dependency management.

How do you change the Stepper color on React Material UI?

Checkout what are the classes of step, stepIcon so you can customize the styles. <Box sx={{ width: '100%' }}> <Stepper activeStep={currentStep} alternativeLabel ......