Setting autocomplete input with yii2? - html

How can I change the input width when I use an autocomplete widget in an active form. This is what I have:
<?php $form = ActiveForm::begin(['id' => 'contact-form']); ?>
<div class="col-md-6">
<?php echo $form->field($model, 'name')
->label('Imię i nazwisko')
->widget(AutoComplete::classname(), [
'clientOptions' => [
'source' => [$data],
]
])
?>
</div>
<div class="col-md-6">
<?php echo $form->field($model, 'email')->label('Adres email') ?>
</div>
<div class="col-md-6">
<?php echo $form->field($model, 'phone')->label('Telefon') ?>
</div>
The autocompleter widget works but I have a problem with the input box. As you can see from the screenshot the "Imię i nazwisko" autocomplete box is much smaller than the others. How can I select my prefer width of this input?

Thanks to #aslawin for helping with the answer!
<?= $form->field($model, 'name')
->label('Imię i nazwisko')
->widget(AutoComplete::classname(), [
'clientOptions' => [
'source' => [$data],
],
'options' => ['style'=>'width: 400px']
])
?>

Related

Yii2 - checkbox change commit ActiveForm

in the index.php there is a checkbox within a active form
<div class="form-group pull-right" style="margin-right: 10px">
<?php Pjax::begin(['id' => 'options']); ?>
<?php $form = ActiveForm::begin(['method' => 'get', 'action' => ['ensemble/index'], 'options' => ['data-pjax' => true]]); ?>
<?= $form->field($searchModel, 'completed')->checkbox(); ?>
<?= Html::submitButton('Apply', ['class' => 'btn btn-success']) ?>
<?php ActiveForm::end(); ?>
<?php Pjax::end(); ?>
</div>
also there is kartik gridview in the index.php
<?= GridView::widget($gridConfig); ?>
with the following configuration
$gridConfig['pjax'] = true;
$gridConfig['pjaxSettings'] = ['options' => ['id' => 'pjaxGrid']];
the ensemble controller with the index action looks like this
public function actionIndex()
{
$searchModel = new EnsembleSearch();
$dataProvider = $searchModel->search(Yii::$app->request->queryParams);
return $this->render('index', [
'searchModel' => $searchModel,
'dataProvider' => $dataProvider,
]);
}
This does work every thing just fine. I can check / uncheck the checkbox field and hit the submit button; which then reloads the gridview. Just cool.
Now i was wondering if it is possible, to just make this with only by clicking the checkbox? So if i check / uncheck the checkbox the gridview will be reloaded (pjax'd).
cheers,
Luc
Assign id to your form as well as class to your checkbox.
<div class="form-group pull-right" style="margin-right: 10px">
<?php Pjax::begin(['id' => 'options']); ?>
<?php $form = ActiveForm::begin([
'id' => 'filter-form',
'method' => 'get',
'action' => ['ensemble/index'],
'options' => ['data-pjax' => true]
]); ?>
<?= $form->field($searchModel, 'completed',['class'=>'status_chk'])->checkbox(); ?>
<?= Html::submitButton('Apply', ['class' => 'btn btn-success']) ?>
<?php ActiveForm::end(); ?>
<?php Pjax::end(); ?>
</div>
Add this script to your index.php file.
<?php
$this->registerJs(
'$("document").ready(function(){
$(document).on("change",".status_chk", function() {
$("#filter-form").submit();
});
});'
);
?>
I would say that you could do that with JavaScript. You could do something like this:
You must know how to identify the Form and the Checkbox (you could assign them so ids..)
In a JavaScript you could do something like this:
var form = document.getElementById("form-id");
document.getElementById("your-checkbox-id").addEventListener("click", function () {
form.submit();
});
As explain in this answer:
submit form with javaScript

Yii2 Horizontal form

What I want to do is to change from bootstrap vertical to horizontal form and this is what I've tried:
<?php $form = ActiveForm::begin([
'layout' => 'horizontal',
'action' => ['index'],
'method' => 'get',
'fieldConfig' => [
'horizontalCssClasses' => [
'label' => 'col-sm-2',
'offset' => 'col-sm-offset-2',
'wrapper' => 'col-sm-4',
],
],
]); ?>
<div class="row">
<div class="col-md-6">
<?= $form->field($model, 'firstname') ?>
<?= $form->field($model, 'lastname') ?>
</div>
<div class="col-md-6">
<?= $form->field($model, 'email') ?>
<?= $form->field($model, 'bla') ?>
</div>
</div>
<?php ActiveForm::end() ?>
but it gave me an error Setting unknown property: yii\widgets\ActiveForm::layout
Please help!!!
For layout option to work ActiveForm must be instance of yii\bootstrap\ActiveForm instead of yii\widgets\ActiveForm.
Change your use statement.
In boostrap you can use
<form class="form-inline"> // for inline fields form
or
<form class="form-horizontal"> // for horizonatal fields form
eg:
<?php $form = ActiveForm::begin([
'layout' => 'horizontal',
'action' => ['index'],
'method' => 'get',
'class' => 'form-horizontal',
]); ?>

Yii2=>ActiveForm=> add "has-error" (or "has-access") by default on page open

I have a simple form:
<?php $form = ActiveForm::begin([
'id' => 'answer-form',
'action' => Yii::$app->getUrlManager()->createUrl('test'),
'enableClientValidation' => false,
]); ?>
<?= $form->field($user_answer, 'user_text')->textInput(['value' => $text])->label('Text') ?>
<?php ActiveForm::end(); ?>
I want to show input with red color (div with class "has-error" by default)- like somebody added wrong data to the input. How can i do it?
Try this
<?= $form->field($user_answer, 'user_text', [ 'options' => [ 'class' => 'has-error'])->textInput(['value' => $text])->label('Text') ?>

Split ActiveForm fields into different tabs with Tabs widget

I'm creating a form view and I want to organize the form fields with tabs structure, using the official Tabs widget.
Is it possible init the Tabs widget with the id (or class) of the div elements that contains the active form fields?
One example of how you can manage it is doing like this:
First, divide your contact-form into one view-file for each tab.
Place the ActiveForm::begin() and ActiveForm::end() around the Tabs::widget()
Render the contact-form pages into content, with parameters $model and $form
Example code:
views/site/contact.php
<?php
/* #var $this yii\web\View */
$this->title = 'Contact';
use yii\bootstrap\Tabs;
use yii\bootstrap\ActiveForm;
?>
<?php $form = ActiveForm::begin(['id' => 'contact-form']); ?>
<?= Tabs::widget([
'items' => [
[
'label' => 'One',
'content' => $this->render('contact_form1', ['model' => $model, 'form' => $form]),
'active' => true
],
[
'label' => 'Two',
'content' => $this->render('contact_form2', ['model' => $model, 'form' => $form]),
],
]]);
?>
<?php ActiveForm::end(); ?>
views/site/contact_form1.php
<?= $form->field($model, 'name') ?>
<?= $form->field($model, 'email') ?>
<?= $form->field($model, 'subject') ?>
views/site/contact_form2.php
<?php
use yii\helpers\Html;
use yii\captcha\Captcha;
?>
<?= $form->field($model, 'body')->textArea(['rows' => 6]) ?>
<?= $form->field($model, 'verifyCode')->widget(Captcha::className(), [
'template' => '<div class="row"><div class="col-lg-3">{image}</div><div class="col-lg-6">{input}</div></div>',
]) ?>
<div class="form-group">
<?= Html::submitButton('Submit', ['class' => 'btn btn-primary', 'name' => 'contact-button']) ?>
</div>
Hope this helps!
Just add at the top of your contact.php global $form; and all works fine.
I have another solution:
When we call $form->field($model, 'name')->textInput(), it will return the model of class yii\widgets\ActiveField, so just continue calling a method of this class as $form->field($model, 'name')->textInput()->render(). It will return a string then you can use it for the tab's content.
I have an example code in my application for translating multi languages as the following code:
<?php
$items = [];
foreach ($translateModels as $translateModel) {
$tabContent = $form->field($translateModel, "[{$translateModel->code}]name")->textInput()->render();
$items[] = [
'label' => $translateModel->language->name,
'content' => $tabContent,
];
}
?>
<?= Tabs::widget([
'options' => [
'class' => 'nav-tabs',
'style' => 'margin-bottom: 15px',
],
'items' => $items,
]) ?>
Maybe it's help.

Yii2: How to add textarea in yii2

What is the mapping of textarea in yii2 ?
How to write this in yii2 format?
<textarea name="downloadSourceCode" id="downloadSourceCode"></textarea>
What is an alternative or way to define textarea in yii2?
You can use Active Forms to create fields like textarea for example
<?php $form = ActiveForm::begin(['id' => 'downloadSourceCode']); ?>
<?= $form->field($model, 'description')->textarea(['rows' => '6']) ?>
<?= Html::submitButton('Submit') ?>
<?php ActiveForm::end(); ?>
In the previouse example you are creating a form with a textarea inside, you can give it a name and pass the model from the controller to show the existing content of the model if you are editing it, if you are creating a new model, you will need to create a new object and then pass it to the view.
Text area code in yii2 could be created in many ways It depends on what you need exactly
Situation 1 You have a Model
say the text area connected to that model in an Active form
<?php $form = ActiveForm::begin(); ?>
<?= $form->field($model, 'election_description')->textArea() ?>
<?php ActiveForm::end(); ?>
the Code generated will be
<div class="form-group field-election-election_description">
<label class="control-label" for="election-election_description">Description</label>
<textarea id="election-election_description" class="form-control" name="Election[election_description]"></textarea>
<div class="help-block"></div>
</div>
As you can see label and error block is generated along with the textarea code by default since this could be useful in practical scenarios .So What i have written above will be interpreted as
<?php $form = ActiveForm::begin(); ?>
<?= $form->field($model, 'election_description',['template'=> "{label}\n{input}\n{hint}\n{error}"])->textArea() ?>
<?php ActiveForm::end(); ?>
Change or remove the label by just doing
<?= $form->field($model, 'election_description')->textArea()->label(false) ?>
<?= $form->field($model, 'election_description')->textArea()->label("Some Label") ?>
Or more advanced customization could be done by modifying the template ,
"{label}\n{input}\n{hint}\n{error}"
is the default template .However template is customizable, If you just want the text area only override the code generation template for text area as
"{input}"
thus
<?= $form->field($model, 'election_description',['template'=> "{input}"])->textArea() ?>
the Code generated will be
<div class="form-group field-election-election_description">
<textarea id="election-election_description" class="form-control" name="Election[election_description]"></textarea>
</div>
The Div wrapping the text filed could be removed by modifying the template of the active form or by using another function activeTextInput
<?= Html::activeTextInput($model, 'election_description'); ?>
the Code generated will be
<textarea id="election-election_description" name="Election[election_description]"></textarea>
Situation 2 You don't have a Model
If we don't have a model and just want to create the exact code as asked best way will be to use Html::textarea
follow this format
textarea ( $name, $value = '', $options = [] )
Refer this example
<?php use yii\helpers\Html;?>
<?= Html::textArea('downloadSourceCode',"",['id'=>'downloadSourceCode']); ?>
Which will generate a code
<textarea id="downloadSourceCode" name="downloadSourceCode"></textarea>
Hope This helps
Refer these links for more info
http://www.yiiframework.com/doc-2.0/yii-widgets-activefield.html#textarea()-detail
http://www.yiiframework.com/doc-2.0/yii-helpers-basehtml.html#textarea()-detail
http://www.yiiframework.com/doc-2.0/yii-helpers-basehtml.html#activeTextarea()-detail
You can do this like:
<?php $form = ActiveForm::begin(['id' => 'my-form']); ?>
<?= $form->field($model, 'field_name')->textArea(['rows' => '6']) ?>
<?= Html::submitButton('Submit') ?>
<?php ActiveForm::end(); ?>
Use Textarea in template
<?= $form->field($model, 'columnName',
['template' => '
{label}
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-newspaper-o"></i>
</span>
{input}
</div>
{error}{hint}'])->textarea(['rows' => 6])->hint('Max 255 characters.'); ?>
You can use the below code
<?= $form->field($model, 'desc')->textarea(); ?>
OR
<?= $form->field($model, 'desc')->textarea()->label('Description'); ?>
OR
<?= $form->field($model, 'desc')->textarea(array('rows'=>2,'cols'=>5)); ?>
For more details about form field.
If you map with model then following code should be OK for you:
<?= $form->field($model, 'downloadSourceCode')->textarea() ?>
<?= $form->field($model, 'field_name')->textArea(['maxlength' => 300, 'rows' => 6, 'cols' => 50,'placeholder'=>'Enter Message Here.....']) ?>
You can run following command on console
php composer.phar require --prefer-dist yiidoc/yii2-redactor "*"
or
"yiidoc/yii2-redactor": "*"
for instaling Redactor see https://github.com/yiidoc/yii2-redactor
Than you can check following line in codes
<?= $form->field($model, 'address')->widget(\yii\redactor\widgets\Redactor::className()) ?>
Like this:
<?php $form = ActiveForm::begin(); ?>
<?= $form->field($model, 'die_geschichte')->textArea(array('rows'=>25, 'cols'=>50, 'readonly' => true, 'name'=>'xyz; )) ?>
<div class="form-group">
<?= Html::submitButton('Unangemessenen Inhalt melden', ['class' => 'btn btn-primary']) ?>
</div>
<?php ActiveForm::end(); ?>
It is so simple. Just write it like this in your ActiveForm::begin.
<?= $form->field($model, 'downloadSourceCode')->textarea(['maxlength' => 1000]) ?>
and you can get your text area.
If you want textarea without specifying any model, use:
<?= \yii\helpers\Html::textarea('name_attribute_value') ?>
Output will be:
<textarea id="id_attribute_value" name="name_attribute_value"></textarea>
It's simple. Just like this
<?= $form->field($model, 'notes')->textarea(); ?>
<?= $form->field($model, 'notes')->textarea()->label('Notes'); ?>
<?= $form->field($model, 'notes')->textarea(['rows'=>2,'cols'=>5]); ?>
This can be help you
Text area
<?= $form->field($model, 'desc')->textarea(['rows'=>2,'cols'=>5,'id'=>'textarea_id','class'=>'form-control textarea_class']); ?>
<?= $form->field($model, 'desc')->textarea()->label('Description'); ?>
Text
<?= $form->field($model,'name'); ?>
<?= $form->field($model, 'name')->textInput()->hint('Please enter your name')->label('Name') ?>
Password
<?= $form->field($model, 'password')->input('password') ?>
<?= $form->field($model, 'password')->passwordInput() ?>
<?= $form->field($model, 'password')->passwordInput()->hint('Password should be within A-Za-z0-9')->label('Password Hint') ?>
File
<?= $form->field($model, 'uploadFile')->fileInput() ?>
<?php echo $form->field($model, 'uploadFile[]')->fileInput(['multiple'=>'multiple']); ?>
Radio
<?= $form->field($model, 'gender') ->radio(array('label'=>''))
->label('Gender'); ?>
<?= $form->field($model, 'gender')->radio(array(
'label'=>'',
'labelOptions'=>array('style'=>'padding:5px;')))
->label('Gender'); ?>
<?= $form->field($model, 'population')->radioList(array('1'=>'One',2=>'Two')); ?>
List
<?= $form->field($model, 'population')-> listBox(
array('1'=>'1',2=>'2',3=>3,4=>4,5=>5),
array('prompt'=>'Select','size'=>3)
); ?>
<?= $form->field($model, 'population')-> listBox(
array('1'=>'1',2=>'2',3=>3,4=>4,5=>5),
array('disabled' => true,'style'=>'background:gray;color:#fff;'))
->label('Gender'); ?>
Its like this.
<?php $form = ActiveForm::begin(); ?>
<?= $form->field($model, 'downloadSourceCode')->textArea(['maxlength' => true]) ?>
<?php ActiveForm::end(); ?>
<?php $form = ActiveForm::begin(); ?>
<?= $form->field($model, 'descrip', ['options' => ['class' => 'custom-class']])->textArea(['maxlength' => true, 'placeholder'=>'Invoice Address', "class"=>'form-control']) ?>
<?php $form = ActiveForm::end(); ?>
**You can Also add Tinymce widget instead of text area.**
<?= $form->field($model, 'club_description')->widget(TinyMce::className(), [
'options' => ['rows' => 4],
//'language' => 'EN',
'clientOptions' => [
'plugins' => [
"advlist autolink lists link charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
'toolbar' => "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
]
]);?>
**Namespace: use dosamigos\tinymce\TinyMce;
Reference: https://github.com/2amigos/yii2-tinymce-widget**
Step 1 : In your view file don't forgot to add ActiveForm Class
use yii\bootstrap\ActiveForm;
Step 2 : Now add the text area as below in the view
field($model, 'body')->textarea(['rows' => 6]) ?>
<?= $form->field($model, 'description')->textarea(['rows' => '2']) ?>
This code is added in views file:
<div class="col-md-12 mb-10">
<label class="control-label" for="cancellesson-cancel_note">Cancel Note</label>
<textarea id="cancellesson_cancel_note" class="form-control" name="cancellesson[cancel_note]" placeholder="Enter Cancel Note" aria-required="true"></textarea>
</div>
<?php $form = ActiveForm::begin(); ?>
<?= $form->field($model, 'description')->textarea(['rows' => '5']) ?>
<?= Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
<?php ActiveForm::end(); ?>
This line is for textarea
<?= $form->field($model, 'description')->textarea(['rows' => '5']) ?>
With the help of Yii2 active form we can create textarea field in form.
$form->field($model, 'fieldName')->textarea(array('rows'=>2,'cols'=>5));
I`m not pretty sure, but activeTextarea() with option attr is nice
there is alternative extension named kartik-v widget:
use kartik\widgets\ActiveForm;
echo ActiveForm::begin();
echo $form->field($model, 'username');
just install with composer
<?php $form = ActiveForm::begin(); ?>
<?= $form->field($model, 'description')->textarea(['rows' => 6]) ?>
<?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
<?php $form = ActiveForm::end(); ?>
With Model:
<?= $form->field($model, 'user')->textArea(['rows' => 6]) ?>
Without Model:
<?= Html::textarea('sourceCode',null,['rows'=>6]) ?>
It has 2 possibilities. FOr now do this:
field($model, 'user')->textArea(['rows' => 6]) ?>