title: Tab-index to move left-to-right then to down
body: <p>We have created an application in AngularJS HTML. In this the tab order on text boxes, links, buttons, and other objects should be left-to-right. Once the right-most object on the row is reached, the tab should go down and to the left-most text box.</p>
  
  <p>To achieve this I have added tab-index on element, but as per the requirement I need left-to-right movement.</p>
  
  <p>One sample code added below :</p>
  
  <pre><code>&lt;div class="col-sm-12" style="margin-bottom: 1%;"&gt;
     &lt;div class="col-sm-5"&gt;
        &lt;div class="form-group"&gt;
           &lt;label class="control-label" for="field_Name"&gt;Name &lt;span style="color:red;"&gt;*&lt;/span&gt;&lt;/label&gt;
           &lt;input tab-index="0" required type="text" class="form-control" name="Name" id="field_Name"
              ng-model="vm.Name"
              ng-maxlength="255"/&gt;
           &lt;div ng-if="myForm.Name.$invalid"&gt;
              &lt;p class="help-block"
                 ng-if="myForm.Name.$error.maxlength"&gt;
                 This field cannot be longer than 255 characters.
              &lt;/p&gt;
           &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
           &lt;label class="control-label"&gt;Upload Sample File&lt;/label&gt;
           &lt;input tab-index="2" type="file"
              name="file"
              id="uploadSampleFile"
              ng-model="vm.File"
              ngf-select
              accept="file_extension"
              ngf-min-size="5000"&gt;
           &lt;div ng-if="myForm.file.$invalid"&gt;
              &lt;p class="help-block" ng-if="myForm.file.$error.minSize"&gt;File size should be greater than 5 KB.&lt;/p&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="col-sm-5"&gt;
        &lt;div class="form-group"&gt;
           &lt;label class="control-label" for="field_Description"&gt;File Description &lt;/label&gt;
           &lt;textarea tab-index="1" class="form-control" style="height: 200px;"
              id="field_Description" ng-maxlength="2000"
              ng-model="vm.Description"
              name="File Description"/&gt;
           &lt;div ng-if="myForm.Description.$invalid"&gt;
              &lt;p class="help-block"
                 ng-if="myForm.Description.$error.maxlength"&gt;
                 This field cannot be longer than 2000 characters.
              &lt;/p&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="col-sm-2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As the UI designed are in column design, so if the design if divided into two parts and each part have four combo boxes, then they are added as :</p>
  
  <p>Div1                    </p>
  
  <ul>
  <li>Field1</li>
  <li>Field3 </li>
  <li>Field5</li>
  <li>Field7</li>
  </ul>
  
  <p>Div2                   </p>
  
  <ul>
  <li>Field2</li>
  <li>Field4 </li>
  <li>Field6</li>
  <li>Field7</li>
  </ul>
  
  <p>Then both div are added as :</p>
  
  <pre><code>&lt;div class="col-sm-12"&gt; ... Div1 ...Div2.. &lt;/div&gt;
  </code></pre>
  
  <p>I need tab movement as Field1 -> Field2, Field3 -> Field4....Field7 -> Field8</p>
  
  <p>But the cursor moves as Field1-> Field3 -> Field5 -> Field7 then Field2 -> Field4 -> Field6 -> Field8</p>
  
  <p>As I have given tab-index as left to right direction as they designed but the cursor focus always moving in top to down as they are added in the design.</p>
  
  <p>How to set tab index and focus in left to right direction then to down without reformatting the ui ?</p>
  
  <p>Is there any way to manually adding tab-index without design changes?</p>