Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • AbsolutelyN 85 posts 433 karma points
    Apr 30, 2018 @ 09:42
    AbsolutelyN
    0

    How can you set umbraco form fields html tab order?

    Umbraco Forms
    Umbraco 7

    Hi

    I'm building a form that has two vertical columns of form fields. The client want's it so that when you hit the tab key to move to next field it moves to the next field to the right rather than the next field below. So tab order needs to be 1 field on left, then first field on right, second field on left, second on right etc ...

    I would have thought this was a fairly common requirement but I can't find any way to (or mention of) setting custom tab orders on form fields. Anyone have any ideas?

    Thanks!

    Copy Link
  • Mark 91 posts -18 karma points
    Apr 30, 2018 @ 10:05
    Mark
    0

    I would look at creating a Theme that deals with this scenario.

    If you look at Views/Partials/Forms/Themes you can see you can create a new theme for how the forms render.

    I would use tabindex html in the form.cshtml file.

    Copy Link
  • AbsolutelyN 85 posts 433 karma points
    Apr 30, 2018 @ 11:19
    AbsolutelyN
    100

    Thanks, I was already using a theme. This is how I have solved it:

    1. Created a new class that inherits the standard textfield

      TextfieldWithTabIndex : Textfield

    2. Added a new setting for TabIndex

      [Setting("TabIndex", description = "Enter HTML tabindex")]
public string TabIndex { get; set; }

    3. Add the various back-end views required for a new fieldtype (just copies of the standard textfield view)

    4. Added a fieldtype view that renders out the custom setting as a html input properties:

         @{if(Model.AdditionalSettings.ContainsKey("TabIndex")){<text>tabindex="@Model.AdditionalSettings["TabIndex"]"</text>}}

    Hope this helps someone - and if there is a better / easier way please let me know!

    Copy Link
  • Julien Kulker 75 posts 427 karma points c-trib
    Nov 24, 2023 @ 11:08
    Julien Kulker
    0

    If you have two verticau columns you can do the following:

    Create for everry row a different group like this:

    enter image description here

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft