vertical alignment not working

invoicer-it commented 4 years ago

Hello,

Thanks a lot for your library! For the sample code below, the vertical alignment of the labels is not working properly: instead of appearing at the same level of the "steps", they are above where they should be. It's like their height is fixed and the more steps you "next", the more distant they get from the step where you are in.

issue

<!doctype html>
<html lang="it">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="bs-stepper.min.css">
    <style>
        body {font-size: 0.9rem;}
    </style>

    <script src="jquery-3.3.1.min.js"></script>
    <script src="bootstrap.min.js"></script>

  </head>
  <body>
    <div class="container-fluid">
      <div class="row clearfix">
        <div class="col-md-12 table-responsive">
          <br>
          <div>
            <h5>TITLE</h5>
          </div>
        </div>
      </div>
      <div class="row clearfix">
        <div class="col-md-12 table-responsive">
            <br>
            <h5>foo foo foo</h5>
        </div>
      </div>
      <div class="row clearfix">
        <div class="col-md-12 table-responsive">
            <br>
            <h5>Do stuff</h5>
            <div id="stepperkey" class="bs-stepper vertical linear">
              <div class="bs-stepper-header" role="tablist">
                <div class="step active" data-target="#test-vl-1">
                  <button type="button" class="step-trigger" role="tab" id="stepperKeytrigger1" aria-controls="test-vl-1" aria-selected="true">
                    <span class="bs-stepper-circle">1</span>
                    <span class="bs-stepper-label">Insert password</span>
                  </button>
                </div>
                <div class="bs-stepper-line"></div>
                <div class="step" data-target="#test-vl-2">
                  <button type="button" class="step-trigger" role="tab" id="stepperKeytrigger2" aria-controls="test-vl-2" aria-selected="false" disabled="disabled">
                    <span class="bs-stepper-circle">2</span>
                    <span class="bs-stepper-label">Do stuff</span>
                  </button>
                </div>
                <div class="bs-stepper-line"></div>
                <div class="step" data-target="#test-vl-3">
                  <button type="button" class="step-trigger" role="tab" id="stepperKeytrigger3" aria-controls="test-vl-3" aria-selected="false" disabled="disabled">
                    <span class="bs-stepper-circle">3</span>
                    <span class="bs-stepper-label">Do stuff</span>
                  </button>
                </div>
                <div class="bs-stepper-line"></div>
                <div class="step" data-target="#test-vl-4">
                  <button type="button" class="step-trigger" role="tab" id="stepperKeytrigger4" aria-controls="test-vl-4" aria-selected="false" disabled="disabled">
                    <span class="bs-stepper-circle">4</span>
                    <span class="bs-stepper-label">Do stuff</span>
                  </button>
                </div>
                <div class="bs-stepper-line"></div>
                <div class="step" data-target="#test-vl-5">
                  <button type="button" class="step-trigger" role="tab" id="stepperKeytrigger5" aria-controls="test-vl-5" aria-selected="false" disabled="disabled">
                    <span class="bs-stepper-circle">5</span>
                    <span class="bs-stepper-label">Do stuff</span>
                  </button>
                </div>
              </div>
              <div class="bs-stepper-content">
                <form onsubmit="return false">
                  <div id="test-vl-1" role="tabpanel" class="bs-stepper-pane fade active dstepper-block" aria-labelledby="stepperKeytrigger1">
                    <div class="form-group">
                      <label for="exampleInputPasswordV1">Password</label>
                      <input type="password" class="form-control" id="exampleInputPasswordV1" placeholder="Password">
                    </div>
                    <button class="btn btn-primary" onclick="stepper.next()">next</button>
                  </div>
                  <div id="test-vl-2" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepperKeytrigger2">
                    <button class="btn btn-primary" onclick="stepper.previous()">back</button>
                    <button class="btn btn-primary" onclick="stepper.next()">next</button>
                  </div>
                  <div id="test-vl-3" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepperKeytrigger3">
                    <button class="btn btn-primary" onclick="stepper.previous()">back</button>
                    <button class="btn btn-primary" onclick="stepper.next()">next</button>
                  </div>
                  <div id="test-vl-4" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepperKeytrigger4">
                    <button class="btn btn-primary" onclick="stepper.previous()">back</button>
                    <button class="btn btn-primary" onclick="stepper.next()">next</button>
                  </div>
                  <div id="test-vl-5" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepperKeytrigger5">
                    <button class="btn btn-primary mt-5" onclick="stepper.previous()">back</button>
                    <button type="submit" class="btn btn-primary mt-5">next</button>
                  </div>
                </form>
              </div>
            </div>
        </div>
    </div>
    <script src="bs-stepper.min.js"></script>
    <script>
        var stepper;
        $(document).ready(function () {
            stepper = new Stepper(document.querySelector('#stepperkey'));
        })
    </script>
  </body>
</html>

Thanks

Jawmo commented 4 years ago

I also have this problem.

MuzammilM commented 4 years ago

Also facing this issue. @Johann-S any guidelines on how to fix it? Tried placing it within "rows" but it just messes up the entire design.

Johann-S commented 4 years ago

@invoicer-it can you provide a live example of your problem ? Same for the others

Without it, it's impossible to me, to help you. Slease create a reduced test case via CodePen/JS Bin or Stackblitz and report back with your link.

heeplr commented 4 years ago

I have the same issue and created a simple testcase.

When one step is very long (like Section 1 in the testcase), the subsequent step will not be placed on top of the page or vertically aligned with the corresponding circle, but directly under the (now invisible) previous step. That way, a lot of scrolling is needed and since the beginning of the section and it's circle are not visible at the same time, there's no indication to which step is currently shown.

It would be awesome, if there would be a mode where all steps are simply shown on top of the page, replacing the previous step, not just making it invisible. That way, very large steps could be used.

EDIT: corrected some stuff

a-pav commented 2 years ago

I think I'm having the same issue with bs-stepper inside adminlte theme. Width of input elements shrinks down after I add vertical class.

For a live example of the problem:

just go to adminlte demo page,
scroll down to bs-stepper (or look it up)
add vertical to the class list through the browser inspector/devtools. So it's like this: <div class="bs-stepper vertical linear">
You should see now what I'm talking about.

Why does the width of inputs change? How can I make it to inherit the col width?

Johann-S / bs-stepper

vertical alignment not working #115