Yii2: How add a symbol before and after an input field

Refresh

5 weeks ago

Views

2.1k time

1

How can I add a symbol before and after of an input text? Just like the image attach.

enter image description here

My code:

<?= $form->field($model_product, 'percent')->textInput(['class'=>'smallInputFormInline'])->label('Percent',['class'=>'labelModalFormInline']) ?>

<?= $form->field($model_product, 'percent_all')->textInput(['class'=>'smallInputFormInline'])->label('Percent All',['class'=>'labelModalFormInline']) ?>

<?= $form->field($model_product, 'amount')->textInput(['class'=>'smallInputFormInline'])->label('Amount',['class'=>'labelModalFormInline']) ?>

SOLUTION

I modify my code following ActiveForm documentation and it works!

Code modified:

<?= $form->field($model_product, 'amount', ['template' => '{label}${input}'])->textInput(['class'=>'smallInputFormInline'])->label('Amount',['class'=>'labelModalFormInline']) ?>

2 answers

0

Using pseudo classes we can do.

.input-symbol {
  position: relative;
  padding: 20px;
}
.input-symbol:before {
  content: "\0024";
  position: absolute;
  left:0;
  
}
.input-symbol:after {
  content: "\0024";
  position: absolute;
}
<div class="input-symbol">
  <input type="text">
</div>

Appreciate if it is useful :)

3

For example you can add some addons to input using ActiveForm field "template" option.

E.g. % addon at the end of input:

<?= $form->field($model_product, 'percent', [
            'template' => '{beginLabel}{labelTitle}{endLabel}<div class="input-group">{input}
            <span class="input-group-addon">%</span></div>{error}{hint}'
        ]); ?>