I have this call to output a set of checkboxes within my view:
<?=$this->Form->input('roles._ids', [
'options' => $roles,
'label' => false,
'multiple' => 'checkbox',
'templates' => [
'checkboxWrapper' => '<label class="mt-checkbox">{{label}}<span></span></label>',
'nestingLabel' => '{{input}}{{text}}',
'inputContainer' => '<div class="col-md-1" style="padding-top: 10px;"><div class="mt-checkbox-list" data-error-container="#form_2_services_error">{{content}}</div></div>'
]]);
?>
Does anyone know a solution - how to break the output into 2 divs?
I wanted to have half the checkboxes in a single
<div class="col-md-1" style="padding-top: 10px;">
(see line "inputContainer") div container. Is that anyhow possible?
If you want to separate checkbox in two columns you can do like this
<?php
$this->Form->templates([
'checkboxWrapper' => '<div class="col-md-6">{{label}}</div>'
]);
?>
<?=$this->Form->input('roles._ids', [
'options' => ['asdasd','asdasd','asdasd'],
'label' => false,
'multiple' => 'checkbox',
]);
?>
OR you can just change the style of default template of cakehphp by adding this css
.checkbox {
width: 49%;
display: inline-block;
}
Hope this will help
Related
Good afternoon,
I am new to programming and struggling to understand Yii2 layout with Bootstrap.
What I am after is really simple, so I thought, but I can't seem to get it to remotely work. I want to create a horizontal form with the labels in front of each input and be able to control to the width of each input.
In my current code, I have 2 simple fields, I want the first to span half of the form (col-md-6) and the second should span the totality of the form (col-md-12), but this just isn't working and I don't understand the why so I'm struggling to fix it.
Below is my view
<?php
use yii\helpers\Html;
use yii\helpers\ArrayHelper;;
use yii\bootstrap\ActiveForm; //used to enable bootstrap layout options
/* #var $this yii\web\View */
/* #var $model backend\models\Projects */
/* #var $form yii\widgets\ActiveForm */
?>
<div class="projects-form">
<?php
$form = ActiveForm::begin([
'id'=>$model->formName(),
'layout' => 'horizontal',
'class' => 'form-horizontal',
'fieldConfig' => [
'enableError' => true,
]
]);
?>
<h2>Project Information</h2>
<h3>General Information</h3>
<div class="form-group row">
<div class="col-md-6">
<?php
echo $form->field(
$model,
'ProjNo'
)->textInput(['maxlength' => true]);
?>
</div>
<div class="col-md-6">
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<?php
echo $form->field(
$model,
'ProjName'
)->textInput(['maxlength' => true]);
?>
</div>
</div>
<p></p>
<p></p>
<?php
ActiveForm::end();
?>
</div>
This is the _form view which is called within the create and update views.
What I don't quite get is why the label alignment isn't consistent because I specify a different width for the overall field and why even though I specified col-md-12, which should be full width from my understanding, it only seems to take about half of the available width.
Any help is greatly appreciated!
Thank you.
current example of what is generated
I just want the labels to line up and be able to have fields with different widths. In the above, when I change the class, the labels change alignment.
You can use the template option under the form's fieldConfig option like below to specify the order of the input, label, and error-block, and these settings would be applied throughout the form for all inputs, in below configurations I am placing the label after the input you can change that if you want.
$form = yii\bootstrap\ActiveForm::begin ( [ 'id' => $model->formName () ,
'layout' => 'horizontal' ,
'class' => 'form-horizontal' ,
'fieldConfig' => [
'enableError' => true ,
'template' => '{input}{error}{label}',
] ] );
you can wrap the {label} and {input} with div like
'template' => '<div class="col-sm-6">{input}{error}</div>
<div class="col-sm-3">{label}</div>',
and remove all the extra HTML from your view just wrap the $form->field() with row see below
$form = yii\bootstrap\ActiveForm::begin ( [ 'id' => $model->formName () ,
'layout' => 'horizontal' ,
'class' => 'form-horizontal' ,
'fieldConfig' => [
'enableError' => true ,
'template' => '<div class="col-sm-6">{input}{error}</div>{label}',
] ] );
?>
<h2>Project Information</h2>
<h3>General Information</h3>
<div class="row">
<?php
echo $form->field (
$model , 'ProjNo'
)->textInput ( [ 'maxlength' => true, ] );
?>
</div>
<div class="row">
<?php
echo $form->field (
$model , 'ProjName'
)->textInput ( [ 'maxlength' => true, ] );
?>
</div>
EDIT
as per discussion you do not want equally aligned labels and inputs but instead you want variable inputs and labels within each row and for doing so you need to configure the template part of the input fields separately and it can look like below if i understood correctly
you should configure your form options and field template options like below and remove the extra class applied on the label col-sm-3 by assigning it control-label class manually
$form = yii\bootstrap\ActiveForm::begin ( [ 'id' => $model->formName () ,
'layout' => 'horizontal' ,
'class' => 'form-horizontal' ,
'fieldConfig' => [
'enableError' => true ,
'options' => [
'class' => ''
]
] ] );
?>
<h2>Project Information</h2>
<h3>General Information</h3>
<div class="row">
<?php
echo $form->field (
$model , 'name' , [ 'template' => '<div class="col-sm-2">{label}</div><div class="col-sm-4">{input}{error}</div>' , ]
)->textInput ( [ 'maxlength' => true ] )->label ( null , [ 'class' => 'control-label' ] )
?>
<?php
echo $form->field (
$model , 'price' , [ 'template' => '<div class="col-sm-2">{label}</div><div class="col-sm-4">{input}{error}</div>' , ]
)->textInput ( [ 'maxlength' => true ] )->label ( null , [ 'class' => 'control-label' ] );
?>
</div>
<div class="row">
<?php
echo $form->field (
$model , 'product_subcategory' , [ 'template' => '<div class="col-sm-2">{label}</div><div class="col-sm-10">{input}{error}</div>' , ]
)->textInput ( [ 'maxlength' => true , ] )->label ( null , [ 'class' => 'control-label' ] );
?>
</div>
<?php
echo yii\bootstrap\Html::submitButton ( 'Submit' );
yii\bootstrap\ActiveForm::end ();
Hope this helps you out
I have the following array at the top of the view file:
$order_status = array(
'nocourier' => 'در حال جستجوی پیک',
'accepted' => 'پیک تعیین شد',
'picking' => 'در حال دریافت مرسوله',
'delivered' => 'تحویل داده شد'
);
And later in the page, I want to use it inside one of the columns of the dataprovider table as below:
[
'label' => 'Status',
'format' => 'raw',
'value' => function ($model, $order_status) {
return Html::a("<div class='col-sm-8 progress' style='padding: 0px; height: 10px;'>
<div class='progress-bar ".$model->status."'></div>
</div><label class='col-sm-4'>".$order_status[$model->status]."</label>", null);
},
'headerOptions' => ['style' => 'text-align: center;'],
'contentOptions' => ['style' => 'width: 300px;']
]
But I get empty label. What am I missing?
could be you need use for pass the content of the array to the anonymous function eg:
'value' => function ($model) use ($order_status){
return Html::a("<div class='col-sm-8 progress' style='padding: 0px; height: 10px;'>
<div class='progress-bar ".$model->status."'></div>
</div><label class='col-sm-4'>".$order_status[$model->status]."</label>", null);
},
i dont know this language but i can se one things that is wrong.
you are creating a function that containe $order_status. so when you call Value you have to pass on $order_status
Value($model , $order_status) for it to work.
i would call $order_status parameter for somthing else too.
I using form field and set label like this :
<?= $form->field($unit, 'estimated_time')->textInput(['style' => 'width: 50px'])->label("Minutes") ?>
but label display in the left side of input-field
How can I display it in right side ?
I think better solution is
<?= $form->field($unit, 'estimated_time', [
'template' => '{input}{label}{error}{hint}',
'options' => ['class' => 'form-group form-inline'],]
->textInput([
'style' => 'width: 50px; margin-right: 10px;']); ?>
Try this :
<?= $form->field($unit, 'estimated_time')->textInput(['style' => 'width: 50px'])->label('Your Label',['class'=>'label-class']) ?>
Add css as
.label-class{
float: right;
}
Assign style for your input like below:
<?= $form->field($unit, 'estimated_time', [
'template' => '<div style="float:right;">{label}</div>{input}{error}{hint}'
]);?>
more reference
http://www.yiiframework.com/doc-2.0/yii-bootstrap-activefield.html
I've created an ActiveForm using yii2 like this:
<?=$form->field($item, 'finalPrice', [
'options' => [
'tag' => 'div',
'class' => '',
],
'template' => '<span class="col-md-2 col-lg-2"><label class="control-label">Final item price</label>{input}{error}</span>'
])->textInput([
// ** i want numeric value **
])->label(false)?>
and it rendered a result of:
<span class="col-md-2 col-lg-2"><label class="control-label">Final item price</label><input type="text" id="item-finalprice" class="form-control" name="Item[finalPrice]"><p class="help-block help-block-error"></p></span>
now i want to make it < input type="number" .. and not text.. (so user could change value using browser up/down buttons). is there any way to do it?
You can use ->textInput(['type' => 'number'] eg :
<?=$form->field($item, 'finalPrice', [
'options' => [
'tag' => 'div',
'class' => '',
],
'template' => '<span class="col-md-2 col-lg-2"><label class="control-label">Final item price</label>{input}{error}</span>'
])->textInput([
'type' => 'number'
])->label(false)?>
Try this . it worked for me
<?= $form->field($model, 'amount')->textInput(['type' => 'number']) ?>
Field like Phone Number/Membership No etc, some time we allow user only to enter numeric input in a text field. In such case applying pattern match rule work great for me.
Simply set a rule in the model class and you are done.
public function rules()
{
return [
...
[['contactno'], 'string', 'max' => 25],
[['contactno'], 'match' ,'pattern'=>'/^[0-9]+$/u', 'message'=> 'Contact No can Contain only numeric characters.'],
...
];
}
<?= $form->field($model, 'code')->textInput(['type'=>'number']) ?>
I need to have Body: (with colon at the end), not Body rendered as label for each field in my form. How can I achieve this the best way?
I tried modifying fieldConfig => template in ActiveForm::begin by adding div class=\"\">{label}:</div> into it:
<?php $form = ActiveForm::begin([
'id' => 'edit-form',
'options' => ['class' => 'form-horizontal'],
'fieldConfig' => [
'template' => "<div class=\"\">{label}:</div>\n<div class=\"\">{input}</div>\n<div class=\"\">{error}</div>",
'labelOptions' => ['class' => 'edit-label'],
]]); ?>
but it is wrong. Colon is rendered as separate DOM element, with incorrect styling and looks ugly.
I tried doing this awfully in CSS:
.edit-label::after {
content: ":";
}
but this is even worse.
I remember, that I made a lot of stupid things in Yii1 to get this. I don't want to repeat these stupid things, when implementing this in Yii2. What is the best way of achieving this?
When using Bootstrap 3 (yii\bootstrap\ActiveField) you can use additional placeholders in the $template and you need to replace {label} with {beginLabel}{labelTitle}:{endLabel}:
<?php $form = ActiveForm::begin([
'id' => 'edit-form',
'options' => [
'class' => 'form-horizontal',
'enctype'=>'multipart/form-data'
],
'fieldConfig' => [
'template' => "<div class=\"\">{beginLabel}{labelTitle}:{endLabel}</div>\n<div class=\"\">{input}</div>\n<div class=\"\">{error}</div>",
'labelOptions' => ['class' => 'edit-label'],
],
]); ?>
I don't know, how to solve this problem, if you're using basic yii\widgets\ActiveField instead.