alwaysLearn
alwaysLearn

Reputation: 6950

How to keep multiple fields and label in one form group in yii2 bootstrap active form

I am working on yii2 bootstrap active form and I need to keep multiple inputs in one form group .

like

 <div class="form-group field-phn required">
                     <label class="control-label" >Home Phone</label>
                     <select id="dialCode" class="form-control" name="AddPatientForm[home_dial_code]">
                        <option value="2">355,ALB</option>
                        <option value="3">213,DZA</option>
                        <option value="6">244,AGO</option>
                        <option value="224">971,ARE</option>
                     </select>
                     <input type="text" id="home_phn" class="form-control" name="AddPatientForm[home_phn]">
                     <p class="help-block help-block-error"></p>
                  </div>

php code I am trying is

<?php echo \yii\bootstrap\Html::activeLabel($objAddPatientFrm, 'home_phn') ?>
<?php echo $objActiveForm->field($objAddPatientFrm, 'home_dial_code', [ 'inputOptions' => [ 'id' => 'dialCode']])->dropDownList($dialCodeArray)->label(false); ?> 
<?php echo $objActiveForm->field($objAddPatientFrm, 'home_phn', [ 'inputOptions' => [ 'id' => 'home_phn']]); ?>

But the output is

<label for="addpatientform-home_phn">Home Phn</label>                  <div class="form-group field-dialCode required">

<select id="dialCode" class="form-control" name="AddPatientForm[home_dial_code]">
<option value="2">355,ALB</option>
<option value="3">213,DZA</option>
<option value="6">244,AGO</option>
<option value="224">971,ARE</option>
</select>

<p class="help-block help-block-error"></p>
</div> 
                  <div class="form-group field-home_phn required">

<input type="text" id="home_phn" class="form-control" name="AddPatientForm[home_phn]">

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

keeping both inputs and label in seperate form group .

Please suggest what can I do ?

Upvotes: 0

Views: 2749

Answers (2)

JamesG
JamesG

Reputation: 1698

My solution to this is to prevent the $form->field() from rendering its own form-group class. This is achieved by using the options property and setting options.class to an empty string (or to include any classes other than form-group). Then wrap the fields in a <div class="form-group">.

Here's the code:

<div class="form-group">
    <?= $form->field($Model, 'attribute1', ['options' => ['class' => '']]); ?>
    <?= $form->field($Model, 'attribute2', ['options' => ['class' => '']]); ?>
</div>

For the OP's example:

<div class="form-group field-phn required">
    <?php echo \yii\bootstrap\Html::activeLabel($objAddPatientFrm, 'home_phn') ?>
    <?php echo $objActiveForm->field($objAddPatientFrm, 'home_dial_code', [ 'inputOptions' => [ 'id' => 'dialCode'], 'options' => ['class' => '']])->dropDownList($dialCodeArray)->label(false); ?> 
    <?php echo $objActiveForm->field($objAddPatientFrm, 'home_phn', [ 'inputOptions' => [ 'id' => 'home_phn'], 'options' => ['class' => '']]); ?>
</div>

Upvotes: 0

Naisa purushotham
Naisa purushotham

Reputation: 913

Use following way to display forms:

 

// With 'default' layout you would use 'template' to size a specific field:
echo $form->field($model, 'demo', [
    'template' => '{label} <div class="row"><div class="col-sm-4">{input}{error}{hint}</div></div>'
]);

// Input group
echo $form->field($model, 'demo', [
    'inputTemplate' => '<div class="input-group"><span class="input-group-addon">@</span>{input}</div>',
]);
Hope it will help..

Upvotes: 1

Related Questions