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

Keen v3 - Stepper improvement


Hi,

I'd want to suggest an improvement to Steppers.

As cited in the docs, Stepper should have navigation buttons inside the <form>.
This causes a problem in Steppers with long content (eg tables with many rows), since the buttons are not immediately and always visible, unless users scroll to end of content.
A solution would be to put the buttons in a .modal-footer, but this way the Stepper's css that hides the unnecessary buttons won't work anymore (eg. the "submit" action button appears in the first step, and so the "previous" one).

Adding support for this case would be awesome (and would reflect better the old keen v2 wizards).


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 (13)


Hi Sean,
I don't know why replies disappeared now.

I will report your last reply here after
"
Hi,

Sorry for the delay. We have been quite busy these months with other projects that generate our main source of income.

Does the workaround solution that we provided work for you? I would suggest using it for the time being.

There is a new version of Bootstrap just released so we will definitely release a new update asap for Keen and we will do our best to add a solution for Stepper with scrollable modal body and action buttons in modal footer.

Regards.
"

Of course, it is not acceptable that I modify my source code for a feature that went missing for no one knows the reason.
To date (this feature request / bug report is 5 months old! , and such fix could have been added easily in the previous release) you have not provided me an estimated release date for the next update.

Regards



Hi,

We are releasing Keen v3.0.7 and your requested feature is implemented.
You can check it here.

Regards,
Sean



Hello Sean,

I have checked quickly with 1 of our steppers and seems to be working.

What about the other request about consistent events (restore the submit event instead of having to manually select the submit button (!)), that I've just found out that went missing when the other messages disappeared?

On 25.08.2023 (Almost 1 year ago!) you wrote "Noted on the kt.stepper.submit suggestion. We will consider it in the next update."
I don't see it among the available events on the docs...



Hi,

Noted, glad to hear that it worked for you.

Regarding the form submit event. We will pass it on for now.
You can use a custom code to submit the form. This gives more freedom to handle the flow programmatically.

Regards.



Hi Sean,

I'm sorry I havent understood if you will add the event or not.
As to what you say, force devs to use the form submit actually limits the way we can handle the stepper (we already discussed this time ago).
The reason is simple: if the "functionality" you provide with the theme is the stepper itself, why should you force users to create single form steppers? I have some steppers which need multiple forms to work. Being forced to use a single form for the whole stepper is, in some cases, just impossible.
Having the possibility to delegate the submit to the stepper (which is the real "container", instead of the form) really gives much more freedom.

This should also make you reason about why the design team just put the whole modal inside the form, to fix the content height issue. Imho (I have tried to figure out your reason, but can hardly come to reasonable ones) is a terrible design.

Instead of helping us being productive, all these little things (stepper, no more outlined checkboxes (remember?) , .. ) prevent us from doing more.

Please ,let me know if you will add the event, and if you will consider to improve the design of the stepper.
Thanks



Hi,

Thanks for your feedback.

This is a stepper component and by right it should handle the sections for steps.

Excluding the submit event from the core stepper logic was suggested by multiple users so we decided to go by this way.

The form submission is a feature that everyone utilizes differently.
The current approach gives more control in validating their forms as you need and decide when to submit the form.

Adding the submit event for the entire stepper limits the flexibility.

Can you please confirm if you now can technically submit the form after validation? If it works well then I think that should be fine since other users prefer the current solution.

Regarding the modal example with scrollable content, I thought it worked well for you as per your previous reply.

Now you are asking something else. We may consider an example with multiple forms in steps. However this is a rate case for most of the users, but we can consider it and demonstrate how our stepper component can be customized for such cases.

Regards.



Hi,

Thank you for the great suggestion. Noted, we added this to our todo list and we will consider implementing it asap.

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  :(