You are viewing revision #11 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version.
This wiki will explain how you can use the Field range extension with multiple Bootstrap form layouts (vertical or horizontal). You maybe aware, that the yii2-field-range extension enables you to easily setup ActiveField range fields with Bootstrap styling. You basically can setup two attributes joined together like a single field with combined validation error block.
Vertical Form Layout ¶
By default the widget supports the bootstrap 3 vertical form layout. In order to display the label and the field range block in a vertical form layout, you need to just provide the following properties to the widget:
- form
- label
This will render the widget correctly for any widget extended from yii\widgets\ActiveForm
including kartik\widgets\ActiveForm
or yii\bootstrap\ActiveForm
.
Horizontal Form Layout ¶
Rendering the Bootstrap 3 horizontal form layout with a field range is always tricky, since there are more than two fields joined together, and the alignment is not always perfect. However, the yii2-field-range extension has been enhanced to support horizontal form layout by default for \kartik\widgets\ActiveForm
and allows you to easily define your markup for other form widgets based on yii\widgets\ActiveForm
.
Your options for a horizontal form layout are:
Option 1 - Using \kartik\widgets\ActiveForm
¶
This is the most straightforward direct approach. An example of using the FieldRange
widget with date input validation using kartik\widgets\DateControl
in a horizontal form layout is mentioned below:
use kartik\widgets\ActiveForm;
$form = ActiveForm::begin([
'type' => ActiveForm::TYPE_HORIZONTAL,
'formConfig' => ['labelSpan' => 3, 'deviceSize' => ActiveForm::SIZE_SMALL],
]);
echo $form->field($model, 'username');
echo FieldRange::widget([
'form' => $form,
'model' => $model,
'label' => 'Enter date range',
'attribute1' => 'from_date_1',
'attribute2' => 'to_date_1',
'type' => FieldRange::INPUT_WIDGET,
'widgetClass' => DateControl::classname(),
'widgetOptions1' => [
'saveFormat'=>'U',
'options'=>[
'pluginOptions' => ['autoclose' => true,],
],
],
'widgetOptions2' => [
'saveFormat'=>'U',
'options'=>[
'pluginOptions' => ['autoclose' => true,],
],
],
]);
ActiveForm::end();
Option 2 - Using other ActiveForm
widgets ¶
If you are using the yii\bootstrap\ActiveForm
or yii\widgets\ActiveForm
, there is no inbuilt option in the widget, but you can easily render the horizontal layout using the following approach. Basically you set useAddons
property to false
,
and setting the CSS classes in labelOptions
, widgetContainer
, and errorContainer
as shown below:
<?php
use yii\widgets\ActiveForm;
$form = ActiveForm::begin(['options'=>['class'=>'form-horizontal']]);
?>
<?= FieldRange::widget([
'form' => $form,
'model' => $model,
'useAddons' => false,
'label'=>'Enter date range',
'labelOptions'=>['class'=>'col-sm-3'],
'widgetContainer'=>['class'=>'col-sm-9'],
'errorContainer'=>['class'=>'col-sm-offset-3 col-sm-9'],
'attribute1' => 'from_date_1',
'attribute2' => 'to_date_1',
'type' => FieldRange::INPUT_WIDGET,
'widgetClass' => DateControl::classname(),
'widgetOptions1' => [
'saveFormat'=>'U',
'options'=>[
'pluginOptions' => ['autoclose' => true,],
],
],
'widgetOptions2' => [
'saveFormat'=>'U',
'options'=>[
'pluginOptions' => ['autoclose' => true,],
],
],
]);?>
<?php ActiveForm::end(); ?>
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.