Yii2 Boostrap ActiveForm Horizontal Layout

Question

Good afternoon,

I am new to programming and struggling to understand Yii2 layout with Bootstrap.

What I am after is really simple, so I thought, but I can't seem to get it to remotely work. I want to create a horizontal form with the labels in front of each input and be able to control to the width of each input.

In my current code, I have 2 simple fields, I want the first to span half of the form (col-md-6) and the second should span the totality of the form (col-md-12), but this just isn't working and I don't understand the why so I'm struggling to fix it.

Below is my view

<?php
use yii\helpers\Html;
use yii\helpers\ArrayHelper;;
use yii\bootstrap\ActiveForm; //used to enable bootstrap layout options

/* @var $this yii\web\View */
/* @var $model backend\models\Projects */
/* @var $form yii\widgets\ActiveForm */
?>

<div class="projects-form">
<?php 
    $form = ActiveForm::begin([
        'id'=>$model->formName(),
        'layout' => 'horizontal',
        'class' => 'form-horizontal',
        'fieldConfig' => [
            'enableError' => true,
        ]
    ]); 
?>

<h2>Project Information</h2>
<h3>General Information</h3>
<div class="form-group row">
    <div class="col-md-6">
        <?php
            echo $form->field(
                $model, 
                'ProjNo'
            )->textInput(['maxlength' => true]); 
        ?>
    </div>
    <div class="col-md-6">
    </div>
</div>
<div class="form-group row">
    <div class="col-md-12">
        <?php
            echo $form->field(
                $model, 
                'ProjName'
            )->textInput(['maxlength' => true]); 
        ?>
    </div>
</div>
<p></p>
<p></p>
<?php
ActiveForm::end();
?>
</div>

This is the _form view which is called within the create and update views.

What I don't quite get is why the label alignment isn't consistent because I specify a different width for the overall field and why even though I specified col-md-12, which should be full width from my understanding, it only seems to take about half of the available width.

Any help is greatly appreciated!

Thank you.

current example of what is generated

I just want the labels to line up and be able to have fields with different widths. In the above, when I change the class, the labels change alignment.

can you add a screen grab of what you are getting and what you are trying to acheieve — Muhammad Omer Aslam

Muhammad Omer Aslam Muhammad Omer Aslam · Accepted Answer · 2018-04-26T18:49:54

You can use the template option under the form's fieldConfig option like below to specify the order of the input, label, and error-block, and these settings would be applied throughout the form for all inputs, in below configurations I am placing the label after the input you can change that if you want.

$form = yii\bootstrap\ActiveForm::begin ( [ 'id' => $model->formName () ,
            'layout' => 'horizontal' ,
            'class' => 'form-horizontal' ,
            'fieldConfig' => [
                'enableError' => true ,
                'template' => '{input}{error}{label}',
    ] ] );

you can wrap the {label} and {input} with div like

'template' => '<div class="col-sm-6">{input}{error}</div>
               <div class="col-sm-3">{label}</div>',

and remove all the extra HTML from your view just wrap the $form->field() with row see below

$form = yii\bootstrap\ActiveForm::begin ( [ 'id' => $model->formName () ,
                'layout' => 'horizontal' ,
                'class' => 'form-horizontal' ,
                'fieldConfig' => [
                    'enableError' => true ,
                    'template' => '<div class="col-sm-6">{input}{error}</div>{label}',
        ] ] );
?>

<h2>Project Information</h2>
<h3>General Information</h3>
<div class="row">
        <?php
        echo $form->field (
                $model , 'ProjNo'
        )->textInput ( [ 'maxlength' => true, ] );
        ?>
</div>
<div class="row">
        <?php
        echo $form->field (
                $model , 'ProjName'
        )->textInput ( [ 'maxlength' => true, ] );
        ?>
</div>

`EDIT`

as per discussion you do not want equally aligned labels and inputs but instead you want variable inputs and labels within each row and for doing so you need to configure the template part of the input fields separately and it can look like below if i understood correctly

you should configure your form options and field template options like below and remove the extra class applied on the label col-sm-3 by assigning it control-label class manually

$form = yii\bootstrap\ActiveForm::begin ( [ 'id' => $model->formName () ,
            'layout' => 'horizontal' ,
            'class' => 'form-horizontal' ,
            'fieldConfig' => [
                'enableError' => true ,
                'options' => [
                    'class' => ''
                ]
    ] ] );
?>
<h2>Project Information</h2>
<h3>General Information</h3>
<div class="row">
    <?php
    echo $form->field (
            $model , 'name' , [ 'template' => '<div class="col-sm-2">{label}</div><div class="col-sm-4">{input}{error}</div>' , ]
    )->textInput ( [ 'maxlength' => true ] )->label ( null , [ 'class' => 'control-label' ] )
    ?>
    <?php
    echo $form->field (
            $model , 'price' , [ 'template' => '<div class="col-sm-2">{label}</div><div class="col-sm-4">{input}{error}</div>' , ]
    )->textInput ( [ 'maxlength' => true ] )->label ( null , [ 'class' => 'control-label' ] );
    ?>

</div>
<div class="row">
    <?php
    echo $form->field (
            $model , 'product_subcategory' , [ 'template' => '<div class="col-sm-2">{label}</div><div class="col-sm-10">{input}{error}</div>' , ]
    )->textInput ( [ 'maxlength' => true , ] )->label ( null , [ 'class' => 'control-label' ] );
    ?>
</div>
<?php
echo yii\bootstrap\Html::submitButton ( 'Submit' );
yii\bootstrap\ActiveForm::end ();

Hope this helps you out

Yii2 Boostrap ActiveForm Horizontal Layout

1 Answers

EDIT

`EDIT`