Different positioning of progressbar

[DBinaghi]

Hi. Great job, thanks. Is there any chance to define a specific DIV to show the progressbar? As it it now, it seems it gets created automatically, and positioned just beside the password field (well, at least in my html). I wondered whether there was an easy was to define a specific div, so that I would position it in my html and then the plugin would use that. Thanks.

[ablanco]

Hi, there seems to be something missing on your questions. There are blanks in your sentences. I'm not sure what you're referring to.

[DBinaghi]

Fixed my original question... In the meantime, I've seen I can play around with Container and Viewport options, but I was wondering it there was a way to separate them completely (so that, for instance, the progress bar div is not a children of the container div)

[ablanco]

I'm afraid not, all the viewports must be part of the container, but you can cheat and define the body to be the container. Then you'll be able to put the viewports wherever you want.

[DBinaghi]

That's a good tip, thanks. Implemented and it works. But now, I seem to have another problem: two progressbars appear, one under the other, with only the first one being active (i.e.: changes when input field content changes).

My html code is:

<div class="col-sm-6" id="pwstrength_container">
    <label>Nuova password <i class="fas fa-question-circle" title="da 6 a 20 caratteri (maiuscole, minuscole, cifre, caratteri speciali... tutto quello che vuoi)" data-toggle="tooltip"></i></label>
    <div class="input-group">
        <input type="password" class="form-control" name="pasvorto_rp" maxsize="20" placeholder="La tua nuova password" tabindex="2" data-toggle="password">
        <div class="input-group-append">
            <span class="input-group-text"><i class="fa fa-eye"></i></span>
        </div>
    </div>
    <div class="pwstrength_viewport_progress mt-1"></div>
</div>

And the js is:

$(':password').pwstrength({
    common: { 
        minChar: 8,
        maxChar: 20
    },
    ui: { 
        showPopover : true,
        showErrors: true,
        showVerdictsInsideProgressBar: true,
        container: "#pwstrength_container",
        viewports: {
            progress: ".pwstrength_viewport_progress"
        }
    }
});

Any idea what's wrong?

[DBinaghi]

Ok, found it: two password fields in the same page; I just swapped ":password" with ".pwstrength" class and problem was solved. Thanks for your help, appreciate it.

[ablanco]

Thank you for using the library!