Better form formatting with ActiveForm

Yii 2.0 General Discussions
1

Hi,

Is there a better way to format the form when using ActiveForm ?

I have the following code which is generating a form with each input having the size 100%.

[html] <?php $form = ActiveForm::begin(); ?>

&lt;?= &#036;form-&gt;field(&#036;model, 'name')-&gt;textInput(['maxlength' =&gt; true]) ?&gt;





&lt;?= &#036;form-&gt;field(&#036;model, 'price_category_description')-&gt;textInput() ?&gt;





&lt;?= &#036;form-&gt;field(&#036;model, 'price')-&gt;textInput() ?&gt;





&lt;div class=&quot;form-group&quot;&gt;


    &lt;?= Html::submitButton(&#036;model-&gt;isNewRecord ? 'Create' : 'Update', ['class' =&gt; &#036;model-&gt;isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?&gt;


&lt;/div&gt;

<?php ActiveForm::end(); ?>[/html]

My first problem is that I want to be able to display all the 3 input on the same line or row. I have tried by adjusting the width to 30% each but it will be 30% but still on different lines.

The second problem is that I also want to be able to set the with of the all the labels and the input distinctly.

Can anyone please help?

Thanks in advance

2

Yii comes with Bootstrap CSS Framework. Use Bootstrap classes in order to format your view files.

3

The Yii bootstrap extension doesn’t support everything. So you’d have to do a few things yourself.

Example: I wanted to have a better address form. So I did this:




<?= $form->field($model, 'street')->textInput(['placeholder' => 'Street, Number']) ?>

<div class="form-group">

    <div class="col-sm-offset-4 col-xs-4 col-sm-3 field-registerform-zip">

        <?= Html::activeInput('text', $model, 'zip', [

            'class' => 'form-control',

            'placeholder' => $model->getAttributeLabel('zip'),

        ]) ?>

        <?php $form->attributes[] = [

            'id' => 'registerform-zip',

            'name' => 'zip',

            'container' => '.field-registerform-zip',

            'input' => '#registerform-zip',

            'enableAjaxValidation' => true,

            'validateOnBlur' => false,

            'validateOnType' => true,

        ] ?>

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

    </div>

    <div class="col-xs-8 col-sm-5 field-registerform-city">

        <?= Html::activeInput('text', $model, 'city', [

            'class' => 'form-control',

            'placeholder' => $model->getAttributeLabel('city'),

        ]) ?>

        <?php $form->attributes[] = [

            'id' => 'registerform-city',

            'name' => 'city',

            'container' => '.field-registerform-city',

            'input' => '#registerform-city',

            'enableAjaxValidation' => true,

            'validateOnBlur' => false,

            'validateOnType' => true,

        ] ?>

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

    </div>

</div>

Adding those arrays to $form->attributes can be omitted if you’re not using ActiveForm client/ajax validation.

Maybe this helps.