Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Multi step sign-in


Hi,
I'm using Metronic 8.1.7 with ASP.NET MVC application.
I'm trying to implement Multi Sign-in like in demo1\dist\authentication\extended\multi-steps-sign-up.html but I can't get quite the same appearance as in sample.
What css and js files must be included beside mandatory global files and Assets/js/custom/utilities/modals/create-account.js?

Best Wishes,
Valentin Faganel


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)


Hi,

Sorry for the late reply.

Yes, multi-steps-sign-up.html uses custom/utilities/modals/create-account.js. Do you have any JS error in your console ?

Have you used the HTML code of this page as per the original multi-steps-sign-up.html?

Regards.



Hi,
I took original multi-steps-sign-up.html to adapt it to my needs. I included mandatory global files and create-account.js.
There is actually an error in console. Here is state of error before my adaptation of the page:

classSet.js:6
Uncaught TypeError: Cannot read properties of null (reading 'classList')
at classSet.js:6:1
at Array.forEach (<anonymous>)
at addClass (classSet.js:5:1)
at classSet.js:30:43
at Array.forEach (<anonymous>)
at classSet (classSet.js:30:1)
at __webpack_modules__.../src/plugins/formvalidation/dist/amd/plugins/Framework.js.Framework.install (Framework.js:46:1)
at __webpack_modules__.../src/plugins/formvalidation/dist/amd/plugins/Bootstrap5.js.Bootstrap5.install (Bootstrap5.js:35:1)
at l.registerPlugin (FormValidation.full.min.js:1:94942)
at FormValidation.full.min.js:1:105826
(anonymous)@classSet.js:6
addClass@classSet.js:5
(anonymous)@classSet.js:30
classSet@classSet.js:30
__webpack_modules__.../src/plugins/formvalidation/dist/amd/plugins/Framework.js.Framework.install@Framework.js:46
__webpack_modules__.../src/plugins/formvalidation/dist/amd/plugins/Bootstrap5.js.Bootstrap5.install@Bootstrap5.js:35
registerPlugin@FormValidation.full.min.js:1
(anonymous)@FormValidation.full.min.js:1
r@FormValidation.full.min.js:1
initValidation@create-account.js:150
init@create-account.js:348
(anonymous)

Best Wishes,
Valentin Faganel



Hi,

I removed create-account.js and add js code from Stepper documentation (https://preview.keenthemes.com/html/metronic/docs/general/stepper).
Console errors are gone and stepper works fine.

Appearence problem still exists in stepper nav part, where colors of titles are not consistent with dark theme: for example current stepper item title should be white but in my app is grey. Non chosen items also are in wrong colors.
Is there any other css to include or code init to run?

Best Wishes,
Valentin Faganel



Hi,

Have you tried the latest Metronic v8.1.8 update?

As you can check the original template's code here
the required CSS code is included via the global styles.bundle.css and it should work as expected you are including the mandatory css/js bundles.

If you could deploy your developing page in your staging server we could quickly check your code and find the issue. Most probably some styles related code missing in your code.

Regards.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(