Adding tabindex is message up activeFrom layout

Yii 2.0 General Discussions
1

I have a activeform view that I modified from the one created by gii.

I changed the layout using Bootstrap to lay the page out nicely.

The page works just fine, but the tabindex order was not what I wanted.

The obvious solution ( i thought ). was to add tabindex…

However, adding the tabindex stuff changed some layout stuff!!! Now my fields don’t line up any more!! :huh: :huh:

What I started with is:

<?= $form->field($model, ‘name’)->textInput([‘maxlength’ => 50]) ?>

6894

before.JPG

field from output file


<div class="form-group field-sessions-name">

<label class="control-label" for="sessions-name">Name</label>

<input type="text" id="sessions-name" class="form-control" name="Sessions[name]" value="Around the World" maxlength="50">


<div class="help-block"></div>

</div>

But what I finished with was:


<?= $form->field($model, 'name', ['inputOptions' => ['tabindex' => '1']] )->textInput(['maxlength' => 50]) ?>

6895

after.JPG

field from output file


<div class="form-group field-sessions-name">

<label class="control-label" for="sessions-name">Name</label>

<input type="text" id="sessions-name" name="Sessions[name]" value="Around the World" maxlength="50" tabindex="1">


<div class="help-block"></div>

</div>

Anyone got ideas on how to fix this??

2

You are overwriting the default value of "ActiveField::inputOptions".

http://www.yiiframework.com/doc-2.0/yii-widgets-activefield.html#$inputOptions-detail

You have to set ‘class’=>‘form-control’ explicitly.




<?= $form->field($model, 'name', ['inputOptions' => ['class' => 'form-control', 'tabindex' => '1']] )->textInput(['maxlength' => 50]) ?>
3

Ah, I did notice that the ‘form-control’ had disappeared, but could not tell what it did or if I should put it back.

I googled tabindex, and everything just talked about adding the tabindex to input options. Nothing about form-control.

I though these were added to the tag, not replacements…

Thank you for your help.

-John S