[Wiki] Nested inline active fields inside Bootstrap horizontal forms

Are you using the Bootstrap 3 form styles with Yii 2 Active Forms? Have you faced problems in displaying complex layouts which needs you to display multiple inline form fields in a single row, within bootstrap horizontal forms. Then read on.

This wiki will explain how you can use the \kartik\widgets\ActiveForm and \kartik\widgets\ActiveField extensions to achieve complex form layouts.

Step 1: Your Horizontal Form Layout

Rendering the Bootstrap 3 horizontal form layout is simple. You just select the type (and optionally your form layout configuration) as shown below

use kartik\widgets\ActiveForm;
$form = ActiveForm::begin([
    'type' => ActiveForm::TYPE_HORIZONTAL,
    'formConfig' => ['labelSpan' => 3, 'deviceSize' => ActiveForm::SIZE_SMALL],
]);
// your fields
ActiveForm::end();

Step 2: Rendering Inline Fields

The complex part is displaying multiple fields on the same row of the horizontal form. The \kartik\widget\ActiveForm and \kartik\widget\ActiveField includes a couple of tweaks for you to achieve this in combination with simple HTML markup. Basically you need to do the following

• Step 2a: Enclose all your inline fields inside a container with form-group kv-fieldset-inline class.
• Step 2b: Setup showLabels property to false for each active field.
• Step 2c: Use Html::activeLabel or Html::label to generate your field labels.

For example

<?php $form = ActiveForm::begin([
    'type' => ActiveForm::TYPE_HORIZONTAL,
    'formConfig' => ['labelSpan' => 3, 'deviceSize' => ActiveForm::SIZE_SMALL],
]);
?>
<div class="form-group kv-fieldset-inline">
    <?= Html::activeLabel($model, 'from_date', [
        'label'=>'Operation Dates', 
        'class'=>'col-sm-2 control-label'
    ]) ?>
    <div class="col-sm-2">
        <?= $form->field($model, 'from_date',[
            'showLabels'=>false
        ])->textInput(['placeholder'=>'From Date']); ?>
    </div>
    <div class="col-sm-2">
        <?= $form->field($model, 'to_date',[
            'showLabels'=>false
        ])->textInput(['placeholder'=>'To Date']); ?>
    </div>
    <?= Html::activeLabel($model, 'begin_date', [
        'label'=>'Experiment Dates', 
        'class'=>'col-sm-2 control-label'
    ]) ?>
    <div class="col-sm-2">
        <?= $form->field($model, 'begin_date',[
            'showLabels'=>false
        ])->textInput(['placeholder'=>'Begin Date']); ?>
    </div>
    <div class="col-sm-2">
        <?= $form->field($model, 'end_date',[
            'showLabels'=>false
        ])->textInput(['placeholder'=>'End Date']); ?>
    </div>
</div>
<?php ActiveForm::end(); ?>

Step 3: Controlling your label widths/styles per field

Your label and input span width classes are automatically generated based on your form config as seen in Step 1. But, if you need to add additional label classes for specific form input labels, here's how you do it.

<?= $form->field($model, 'amount',['labelOptions'=>['class'=>'col-sm-2 col-md-2 col-lg-2']]);

Viewing a demo

You can view a complete demo here of using the \kartik\widgets\ActiveForm and \kartik\widgets\ActiveField widgets with nested inline fields inside a Bootstrap 3 horizontal form.