react-stepper icon indicating copy to clipboard operation
react-stepper copied to clipboard

Line Height Issues

Open AustinErck opened this issue 6 years ago • 2 comments

The line height of the number inside the circle is not always calculated correctly as some fonts have weird spaces. Can we get a line height offset prop that allows us to easily correct this for font's that have weird padding?

AustinErck avatar Sep 04 '18 22:09 AustinErck

+1

jknapp25 avatar Oct 15 '18 03:10 jknapp25

If this is still a problem to anyone, here's how I solved it:

  1. Wrap your stepper in a div with an specific class
<div className='stepper-container'>
    <Stepper steps={steps} activeStep={activeStep} />
</div>

apply this css to your code:

.stepper-container div div div div a {
 line-height: ::your line height here:: !important;
}

.stepper-container div div div div span {
 line-height: ::your line height here:: !important;
}

or if you're using scss:

.stepper-container div div div div {
  a {
 line-height: ::your line height here:: !important;
  }
  span {
 line-height: ::your line height here:: !important;
  }
}

piubellofelipe avatar Mar 07 '19 19:03 piubellofelipe