Search code examples
javascriptreactjsmaterial-uistepper

ReactJS MaterialUI Stepper breaks on overflow

I have been trying to convince the Material UI Stepper component to fit my needs, that is to say display severl steps and overflow, but it continues doing this:

enter image description here

I don't know how to explain the error... the separators are doing weird things on horizontal overflow. Here is the sandbox. How can I get this working?

Solution

  • TL;DR: 1) Word-break your labels (<StepLabel style={{ wordBreak: "break-all" }}>) so they don't invade layouts among steps and 2) provide an initial width to the stepper (<Stepper ... style={{ width: 64*16 }}>) so it does not use the parent width to do so.

    I fixed your pastebin: fixed stepper labels and content width

    NL;PR: You had two styles missing to handle long words and content within a scrollable container:

    For 1) the labels' words were bigger than the allotted space to render the steps since 550px is too tight for 16 steps, so they broke the layout, play it safe by not letting lengthy words overflow the label.

    For 2) consider given the Stepper component a proportional value (64 (stepper min-width)* 16(stepper count)), and since you want to have a scroller, the width of the scrollable container is used as the initial width of the content, thus you must specify the content(Stepper) so it is not shrunk too much before overflowing.

    Note: Those styles I provided are examples, you can customize them to your needs. Also, consider passing those changes via classes.