How do I set the width of an active field widget?

Yii 2.0 General Discussions
1

I have an Active Form which contains a couple of widget fields, and I want to control the width of these fields. Simple requirement, but I’ve been Googling all afternoon, and still haven’t found a clear answer or example of how to do this.

One of my widgets if the kartvik date control, which I’ve added to the form thus:


<?= $form->field($model, 'chargedate')->widget(

			    DateControl::classname(), [

			        'type'=>DateControl::FORMAT_DATE,

			        'ajaxConversion'=>false,

			        'options' => [

			            'pluginOptions' => [

			                'autoclose' => true,

			            ],

			        ],

			    ]

			    )

			?>

This works fine, but the widget input control spans the entire form, and I’d like to be able to make, say, 100px wide. I tried adding a style setting as the options parameter to the field method, e.g.:


$form->field($model, 'chargedate',[ 'options' => ['style' => 'width: 100px']])

but this ruined the alignment of the control, placing it at the extreme left-hand-side of the page. I also tried adding the style setting to the widget’s options and pluginOptions arrays, but to no avail.

How can I control the width of this and other Active Form widgets?

2

If you want to set options to the input tag, not the




<div class="form-group field-chargedate">

</div>

Then you need to pass options to the widget itself, not the $form->field();

Also, if you need more flexibility you can define inputs like this




<?= $form->field($model, 'chargedate')->begin(); ?>

    <?= Html::activeLabel($model, 'chargedate'); ?>

    <div class='col-md-6'>

        <?= DateControl::widget(); ?>

    </div>

<?= $form->field($model, 'chargedate')->end(); ?>
3

Thanks, djeux, your approach of using the field->begin() and field->end() methods to obtain more granular control of the field formatting worked, although I had to tweak the formatting of the label and control a little further to achieve what I was looking for, as follows:


 <?= $form->field($model, 'chargedate')->begin(); ?>

                <?= Html::activeLabel($model, 'chargedate',['class' => 'control-label col-sm-3']); ?>

                <div class='col-xs-3' style='height: 44px;'>

                    <?= DateControl::widget([

                        'model' => $model,

                        'attribute' => 'chargedate',

    			        'type'=>DateControl::FORMAT_DATE,

    			        'ajaxConversion'=>false,

    			        'options' => [

    			            'pluginOptions' => [

    			                'autoclose' => true,

    			            ],

    			        ],

    			    ]); 

                    ?>

                </div>

            <?= $form->field($model, 'chargedate')->end(); ?>

I had to set the CSS class of the control label manually, as initially the label appeared to the right of the widget.

I also found that the height of the div containing the widget wasn’t the same as the other controls in the form (34px instead of 44px), so I had to set this manually, too.

So, I eventually managed to control the width of the DateControl widget using this approach, but it seems a very long-winded way of achieving such a simple formatting requirement. Does anyone know of a simpler way of setting the width of a widget control in an ActiveForm?