Set Dropdown list width in yii2 - yii2

How to set Dropdown list width in Yii2, here the code
<?= $form->field($model, 'id_ts')
->dropDownList(
ArrayHelper::map(vision::find()->all(),'id_ts', 'vision'),
[
'prompt' =>'',
'disabled' => $model->isNewRecord ? true : false
]
) ?>
How to make dropdown list box wider ?

You can just add style in dropDownList show below code
<?= $form
->field($model, 'id_ts')
->dropDownList(
ArrayHelper::map(vision::find()->all(),'id_ts', 'vision'),
[
'style' => 'width:15px !important',
'prompt' => '',
'disabled' => $model->isNewRecord ? true : false
]
) ?>

Related

Create dependent dropdown in Yii2

These are two active-form fields in Yii2.
<?= $form->field($model, 'navigation_type')->dropdownList(['Module'=>'Module','Screen'=>'Screen']) ?>
<?= $form->field($model, 'showInUrl')->dropdownList([0=>'No',1=>'Yes']) ?>
When I click Screen, the second field should be changed to Yes. When I click Module, it should be changed to No. I have to save only 0 or 1 to the db.
How can I do this?
Well, you need to bind the change event to the first drop-down using javascript/jquery like below. add the script on top of your view and provide the id to both the dropdowns.
$this->registerScript("
$('#navigation_type').on('change',function(){
if($(this).val() == 'Module'){
$('#showInUrl').val(0);
}else{
$('#showInUrl').val(1);
}
});",\yii\web\View::POS_END);
<?= $form->field($model, 'navigation_type')->dropdownList(['Module'=>'Module','Screen'=>'Screen'],['id'=>'navigation_type']) ?>
<?= $form->field($model, 'showInUrl')->dropdownList([0=>'No',1=>'Yes'],['id'=>'showInUrl' ])?>
Apart from above solution, you should look into DepDropDown by kartik which reduces your efforts to
a maximum and you just need to integrate and it works great.
Using Kartik/select Dropdown You Can Code like These :
<div class="navigation-form">
<?= $form->field($model, 'navigation_type')
->widget(kartik\select2\Select2::className(), [
'data' => ['Module'=>'Module','Screen'=>'Screen'],
'options' => ['multiple' => false],
'pluginOptions' => [
'placeholder' => 'Select Module',
],
])
?>
<?= $form->field($model, 'showInUrl')->widget(kartik\select2\Select2::className(),[
'data' => [0=>'No',1=>'Yes'],
'options' => ['multiple' => false],
'pluginOptions' => [
'placeholder' => 'ShoW URL',
],
]) ?>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#navigation-navigation_type').on("change",function(e){
var sel_val = $(this).select2("val");
if(sel_val=='Screen'){
$('[name="navigation[showInUrl]"]').val('Yes').trigger('change');
}
if(sel_val=='Module'){
$('[name="navigation[showInUrl]"]').val('No').trigger('change');
}
});

How to add a placeholder to a dropdown in Yii2?

I need to add a placeholder into my dropdown and somehow it doesn't work.
Here is my input field:
<?= $form->field($category, 'id')->dropDownList($categoryList, [
'id' => 'category-id',
'prompt' => 'Select category', [
'disabled' => true,
]
]); ?>
Could someone explain me what I'm doing wrong? Thanks for any help!
DropDownList has no placeholder, use 'prompt' instead:
$form->field($category, 'id')->dropDownList($categoryList, [
'id' => 'category-id',
'prompt'=>'- Select category -'
]);

Remove encoding for popovers on labels

I'm using Yii2 to generate a popover on a label, but having some trouble to remove the default HTML encoding. I'm not sure that the popover can be created for just the label without HTML encoding and what the correct way to do this is, it must be possible though as Gii uses some variant of this code? This is what I've tried:
<?= $form->field($model, 'function')->textInput(['maxlength' => true])
->label(null, [
'class' => 'dashed-line',
'data-toggle' => 'popover',
'data-content' => 'This will be ran through <code>strtolower()</code>',
'data-placement' => 'right',
'encodeLabel'=> false]) ?>
Use
['labelOptions' => ['encode' => false]]
.
<?= $form->field($model, ['labelOptions' => ['encode' => false]] ,
'function')->textInput(['maxlength' => true])
->label(null, [
'class' => 'dashed-line',
'data-toggle' => 'popover',
'data-content' => 'This will be ran through <code>strtolower()</code>',
'data-placement' => 'right',
) ?>
you can use label option for setting the encode false of label attribute
<?= $form->field($model,
'function')->textInput(['maxlength' => true])
->label(null, [
'class' => 'dashed-line',
'data-toggle' => 'popover',
'data-content' => 'This will be ran through <code>strtolower()</code>',
'data-placement' => 'right',
'encode' => false,
) ?>

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') ?>

Yii 2 Editable, how to use editable inside form?

$form = ActiveForm::begin();
..
echo Editable::widget([ //this break outter form, because this generate another form
'name'=>'person_name',
'asPopover' => true,
'value' => 'Kartik Visweswaran',
'header' => 'Name',
'size'=>'md',
'options' => ['class'=>'form-control', 'placeholder'=>'Enter person name...']
]);
ActiveForm::end();
So, I tried,
echo Form::widget([
'model'=>$model,
'form'=>$form,
'columns'=>1,
'attributes'=>[
'title'=>[
'label'=>false,
'type' => Editable::INPUT_TEXT,
'widgetClass' => Editable::className(),
'options' => [
'asPopover' => true,
]
],
]
]);
but, it shows input box all the time, not editable text.
how can I use editable widget inside form? without breaking outter form?
You can try this way:
<?= $form->field($model, 'person_name')->Editable::widget([
'name'=>'person_name',
'asPopover' => true,
'value' => 'value',
'header' => 'Name',
'size'=>'md',
'options' => ['class'=>'form-control', 'placeholder'=>'Enter person name...']
]);
?>
Note : Not tested yet.