Forums: Modifying the tabindex order - Forums

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Modifying the tabindex order Add page Free Form mode

#1 User is offline   GeorgeB 

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 56
  • Joined: 27-April 11

Posted 12 March 2017 - 07:04 PM

I always thought the tab-index order on a form should adhere to the order in which the Fields were listed on the "Fields Order and Totals" page. This does not appear to always be the case and has resulted in many inquires about how to change tab-index orders on a form.

this process appears to work only in free form mode as there are no individual begin and end edit control tags only begin and end for all controls
Regular Mode
{BEGIN EndTime_fieldblock}
<DIV class="container">
<DIV class="form-group {$fielddispclass_EndTime}" data-signal-error-for="EndTime{$id}" data-fieldname="EndTime">
<LABEL class="col-md-3 control-label" for="{$labelfor_EndTime}">
{BEGIN EndTime_label}
{$label dbo_RaceQuotes EndTime}
{END EndTime_label}
</LABEL>
<DIV class="col-md-6">
{$EndTime_editcontrol}
</DIV>
<DIV class="col-md-3 help-block" data-helpfor="EndTime">
<DIV class="text-muted">
{$tooltip dbo_RaceQuotes EndTime}
</DIV>
</DIV>
</DIV>
</DIV>
{END EndTime_fieldblock}



Free Form Mode
<DIV class="rnr-ff-cwrap {$fielddispclass_EndTime}" style='left: 255px; top: 59px; line-height: 1.4285; font-family: "Ubuntu",Tahoma,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: 700; position: absolute;' data-fieldname="EndTime">
{$label dbo_RaceQuotes EndTime}
</DIV>
<DIV class="rnr-ff-cwrap {$fielddispclass_EndTime}" style='left: 346px; top: 50px; line-height: 1; font-family: "Ubuntu",Tahoma,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: 400; position: absolute;' data-fieldname="EndTime">
{$EndTime_editcontrol}
</DIV>
<DIV class="rnr-ff-cwrap" style='left: 831px; top: 55px; line-height: 1.4285; font-family: "Ubuntu",Tahoma,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: 400; position: absolute;'>
{$tooltip dbo_RaceQuotes EndTime}
</DIV>


each control on the page has three "Sections"
label
control
tooltip

they are referenced in the editor page (HTML mode) as
<DIV class="rnr-ff-cwrap {$fielddispclass_StateProvinceId}" style='left: 380px; top: 80px; line-height: 1.4; font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 12px; font-style: normal; font-weight: 400; position: absolute;' data-fieldname="StateProvinceId">
{$label QuoteWizardStep2 StateProvinceId}
</DIV>
<DIV class="rnr-ff-cwrap {$fielddispclass_StateProvinceId}" style='left: 380px; top: 100px; line-height: 1; font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 15px; font-style: normal; font-weight: 400; position: absolute;' data-fieldname="StateProvinceId">
{$StateProvinceId_editcontrol}
</DIV>
<DIV class="rnr-ff-cwrap" style='left: 380px; top: 130px; line-height: 1.4; font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 12px; font-style: normal; font-weight: 400; position: absolute;'>
{$tooltip QuoteWizardStep2 StateProvinceId}
</DIV>

cutting these three sections and pasting in the location relative to the order you wish your tab-index to work will change the tab-index but not the display order.

Again it works in Free Form Mode and is a hack for certain......but easier than writing 50 lines of javascript onload code....... :)

George Benson
0

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic