JUI widget renders differently than Active Fields in Active Form

Yii 2.0 General Discussions
1

Hi,

I have created forms for user input based on ActiveForm. Some fields are simple text fields (textInput), but I use \jui\AutoComplete and \jui\DatePicker in some instances. They work fine except that the JUI fields are a lot shorter and display the label next to the data field whereas the text fields and dropdown fields use the entire row (width of the browser window) and the label is on top.

This makes the form page look a little messy, but I have not found a way to change it. I would like to force the JUI widgets to look like the rest if possible.

Here is one example:

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

&lt;?= &#036;form-&gt;field(&#036;model, 'clienteId')-&gt;hint('Teclea nombre de cliente para buscarlo en la base de datos.')-&gt;textInput()-&gt;widget(&#092;yii&#092;jui&#092;AutoComplete::classname(), [





                'name' =&gt; 'Cliente',


                'id' =&gt; 'ddd',


                'clientOptions' =&gt; [


                                'source' =&gt; Yii::&#036;app-&gt;getUrlManager()-&gt;createUrl('cliente2/ajax'),


                                'minLength' =&gt; 2,


                                'autoFill' =&gt; true,


                    ],


            ]) ?&gt;








&lt;?= &#036;form-&gt;field(&#036;model, 'valorOperacion')-&gt;hint('Formato: &#036;123,000.00 (&#036; y las comas son opcionales)')-&gt;textInput(['maxlength' =&gt; true, 'class' =&gt; 'inp_valOperacion form-control']) ?&gt;

The form excerpt is attached.

2

I guess you have to apply bootstrap classes to JUI controls in order for them to be styled in a similar way.