1. Step 1: Your Horizontal Form Layout
2. Step 2: Rendering Inline Fields
3. Step 3: Controlling your label widths/styles per field
4. Viewing a demo

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.

Tip: Instead of setting showLabels at each active field level, you can also set a showLabels property at the kartik\widgets\ActiveForm configuration level within the formConfig array. This will help you set display of labels to false for all active fields within the form.

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.