How to prepend / append bootstrap3 icon to Active Form in yii2 alpha
Asked Answered
S

1

5

This is how i added the icon with text field. Also added the image of generated output. I don't want to use Krajee Yii Extensions. So i started to read the documentation.

$form =  \yii\widgets\ActiveForm::begin([
  'id' => 'form-id',
  'options' => ['class' => 'form-horizontal'],
  'enableClientValidation'=> false,
  'enableAjaxValidation'=> true,
  'validateOnSubmit' => true,
  'validateOnChange' => true,
  'validateOnType' => true,
  'action' => 'youraction',
  'validationUrl' => 'yourvalidation'
]);        

    echo $form->field($model, 'fieldname')->begin();
      echo Html::activeLabel($model,'fieldname', ["class"=>"col-sm-3 control-label"]); ?>
      <div class="input-group col-sm-4 ">
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-subtitles"></span>
        </span>
        <?php echo Html::activeTextInput($model, 'fieldname', [
            'class'=>'form-control',
            'autocomplete'=>'off'
          ]
        ); ?>
      </div>
      <?php echo Html::error($model,'origin', ['class' => 'help-block']);
    echo $form->field($model, 'origin')->end();

\yii\widgets\ActiveForm::end(); 

Example View

Squalid answered 27/3, 2014 at 12:50 Comment(1)
Please do not use "bootstrap" tag, use "twitter-bootstrap" since it means something elseAlbrecht
H
11

Is this a question or you are showing us how you did it?

You should also be able to do something like:

<?= $form->field($model, 'fieldname', ['template' => '
   <div class="col-sm-2">{label}</div>\n
   <div class="col-sm-10">
       <div class="input-group col-sm-4 ">
          <span class="input-group-addon">
             <span class="glyphicon glyphicon-subtitles"></span>
          </span>
          {input}
       </div>
       {error}{hint}
   </div>'])->textInput(['data-default' => '']) ?>
Hosiery answered 13/10, 2014 at 5:39 Comment(1)
I'm trying 'onclick' on the button inside the 'template'. But it's not working. Please tell me how should I do it?Icao

© 2022 - 2024 — McMap. All rights reserved.