In CakePHP 2.0 I can actually add 'before', 'after' and 'separator' attributes to the radio button. The attributes will create a div element between my radio options. It seems like these options have been removed from CakePHP 3.0. How can I do that in CakePHP 3.0?
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="square-screening single-row screen-radio">
<?php echo $this->Form->input('q1',array(
'legend'=> false,
'type'=>'radio',
'options'=> $options,
'required'=>'required',
'before' => '<div class="radio-inline screen-center screen-radio">',
'separator' => '</div><div class="radio-inline screen-center screen-radio">',
'after' => '</div>',
)); ?>
</div>
</div>
You need to use FormHelper Templates. From migration guide:
The separator, between, and legend options have been removed from radio(). You can use templates to change the wrapping HTML now.
The div, before, after, between and errorMessage options have been removed from input().
so in your case use this
echo $this->Form->input('q1', [
'templates' => [
'radioWrapper' => '<div class="radio-inline screen-center screen-radio">{{label}}</div>'
],
'type' => 'radio',
'options' => $options,
'required' => 'required',
'label' => false
]);
See also:
Customizing the Templates FormHelper Uses
FormHelper Templates - default values
It so very easy.
You can use form helper.
Cake\View\Helper\FormHelper::radio(string $fieldName, array $options, array $attributes)
Using
echo $this->Form->radio(
'favorite_color',
[
['value' => 'r', 'text' => 'Red', 'style' => 'color:red;'],
['value' => 'u', 'text' => 'Blue', 'style' => 'color:blue;'],
['value' => 'g', 'text' => 'Green', 'style' => 'color:green;'],
]
);
Docs
Related
I have a following code below:
<?= $form->field($model, 'date') ->widget(yii\jui\DatePicker::className(),['clientOptions' => [ 'placeholder' => 'dd/mm/yyyy',
'id' => 'form',
'autocomplete' => 'off',
'value' => date('m/d/Y'),
'autoclose'=>true,
]]) ?>
That will result in HTML in following way:
<div class="form-group has-icon has-label">
<label for="formSearchUpLocation">Picking Up Location</label>
<input type="text" class="form-control" id="formSearchUpLocation" placeholder="Airport or Anywhere">
<span class="form-control-icon"><i class="fa fa-map-marker"></i></span>
</div>
My question is as following:
How can I integrate the css and bootstrap classes in HTML below into yii2 active form above?
Thank you for your help.
if you are looking to add the class to all the group divs mean all the div that have the class form-group then you can use the fieldConfig option of the ActiveForm or if you want it for one specific field then you can use the options option of the $form->field() as the 3rd parameter
For the whole Form
$form = yii\widgets\ActiveForm::begin([
'fieldConfig' => [
'options' => [
'class' => 'my-group'
]
]
]);
For Single Field
echo $form->field($model, 'name', ['options' => ['class' => 'my-class']])->textInput();
Conversion
About converting your above HTML using ActiveForm the following should work you can use template option of the $form->field() 3rd parameter to add your custom icon after the input, along with other, see below will create your desired HTML
echo $form->field($model, 'date', [
'options' => [
'class' => 'form-group has-icon has-label'
],
'inputOptions' => [
'class' => 'form-control'
],
'template' => '{label}{input}<span class="form-control-icon"><i class="fa fa-map-marker"></i></span>{error}'
])->widget(yii\jui\DatePicker::class, [
'id' => 'created_at',
'options' => [
'placeholder' => 'Airport or Anywhere'
]
]);
You will have something like below
<?= $form->field($model, 'date') ->widget(yii\jui\DatePicker::className(),['clientOptions' => [ 'placeholder' => 'dd/mm/yyyy',
'id' => 'form',
'class' => 'WRITE-YOUR-CLASS'
'autocomplete' => 'off',
'value' => date('m/d/Y'),
'autoclose'=>true,
]]) ?>
just input your class name in 'class' section it will work.
example : 'class' => 'fa fa-map-marker'
You could try something like the code bellow to concat your calendar icon with the widget:
<?php
$addon = '<span class="input-group-addon">
<i class="fa fa-calendar-alt"></i>
</span>';
echo $addon.$form->field($model, 'date')->widget(yii\jui\DatePicker::className(),['clientOptions' => [ 'placeholder' => 'dd/mm/yyyy',
'id' => 'form',
'autocomplete' => 'off',
'value' => date('m/d/Y'),
'autoclose'=>true,
]]);
?>
Or you can try search more on the plugin you are using, some widgets have his own attribute to render the calendar icon.
I am attempting to create several radio buttons with a specific label...
I am using the following code, however, there is no label
echo $this->Form->radio('qualify', [['value' => 1, 'text' => 'Yes'], ['value' => 0, 'text' => 'No']], ['label' => 'Qualify Only']);
Any ideas on how I can get the label to show up for these radio buttons?
<?php
$qualify = [['value'=>'0','text'=>'No'],['value'=>'1','text'=>'Yes']];
echo $this->Form->input('qualify', array(
'options' => $qualify,
'type' => 'radio',
'placeholder' => 'Qualify Only'
));
?>
This code will be able to pick any existing value in the edit view.
You can still use the $this->Form->input and put a type whether its a select or radio
<?php
$qualify = ['0' => 'No', '1' => 'Yes'];
echo $this->Form->input('qualify', array(
'options' => $qualify,
'type' => 'radio',
'placeholder' => 'Qualify Only'
));
?>
what is the use of links__system_main_menu in drupal?
<?php if ($main_menu): ?>
<div id="main-menu" class="navigation">
<?php print theme('links__system_main_menu', array(
'links' => $main_menu,
'attributes' => array(
'id' => 'main-menu-links',
'class' => array('links', 'clearfix'),
),
'heading' => array(
'text' => t('Main menu'),
'level' => 'h2',
'class' => array('element-invisible'),
),
)); ?>
</div> <!-- /#main-menu -->
This is a pattern for theme hook, in the form [base hook]__[context]. When links theme with theme('links__system_main_menu', $variables), theme() function search for *theme_links__system_main_menu()* and use it. Otherwise, if it doesn't find, it will use *theme_links()*. For more information check the theme Doc
I am trying to achieve the output where I have a wrapper div which contains a label and an inner div, and within the inner div I have the form input.
My output should look like this:
<div class="form-group">
<label>Name:</label>
<div class="form-input">
<input type="text" />
</div>
</div>
Here is my current form object in php:
echo $this->Form->input('name', array(
'class' => 'form-input',
'div' => 'form-group',
'label' => array('class' => 'control-label')));
But this adds the class form-input to the actual input itself.
How would I be able to achieve this while still keeping true to the CakePHP way of doing things?
TIA!
Use input options 'before', 'after', 'between' http://book.cakephp.org/2.0/en/core-libraries/helpers/form.html#options I haven't verified it, but I think it should look something like this:
echo $this->Form->input('name', array(
'between' => '<div class="form-input">',
'after' => '</div>',
'div' => 'form-group',
'label' => array('class' => 'control-label')));
What about this:
echo $this->Form->input('name', array(
'div' => 'form-group',
'before' => '<div class="form-input">',
'after' => '</div>',
'label' => array('class'=>'control-label')
));
I think this works.
I am using the last version of cakephp, with the follow code I have to create a list of checkboxes.
echo $this->Form->input('regions', array(
'type' => 'select',
'hiddenField' => false,
'options' => $regions,
'multiple' => 'checkbox',
'div' => false
));
the code works 90%, I mean... the list has been created BUT I still see <div>
This is the result:
<div class="checkbox"><input type="checkbox" name="data[regions][]" value="1" id="Regions1" /><label for="Regions1">AAAA</label></div>
<div class="checkbox"><input type="checkbox" name="data[regions][]" value="2" id="Regions2" /><label for="Regions2">BBBB</label></div>
<div class="checkbox"><input type="checkbox" name="data[regions][]" value="3" id="Regions3" /><label for="Regions3">CCCC</label></div>
The result I need is:
<li>
<input type="checkbox" name="data[regions][]" value="1" id="Regions1" /><label for="Regions1">AAAA</label>
</li>
...
How can I do it ?
By setting 'div' => false, your prevents creating a <div> around the whole input section (i.e. the set of checkboxes). But obviously you want to disable the div's around the option. Unfortunately, I have not been able to find a way to disable this with Cake.
However, you can simulate the <li> items with some CSS trickery. Encapsulate the inputs in a div with a special class (the opposite of what you are doing now), then use CSS to force using <li> styling:
In your CSS:
.box2li div
{
display: list-item;
}
In your Cake view:
echo $this->Form->input('regions', array(
'type' => 'select',
'hiddenField' => false,
'options' => $regions,
'multiple' => 'checkbox',
'div' => array ('class' => 'box2li')
));
Each checkbox is now preceded by a... ...bullet
There should be a more simple way but you can always do it in the traditional way :)
while (list($key, $value) = each($regions)){
echo '<li>'.
$this->Form->input($value,
array(
'type' => 'checkbox',
'name' => 'data[regions][]',
'div' => false,
'value' => $key,
'label' => false,
'after' => $this->Form->label($value, $value)
))
.'</li>';
}
Not so beautiful, but works :)
Use Form->Checkbox instead of Form->input
$this->Form->checkbox('', array(
'label' => false,
'div' => false,
'class' => ''
));
$this->Form->checkbox('', array(
'label' => false,
'div' => false,
'class' => ''
));
$this->Form->checkbox('', array(
'label' => false,
'div' => false,
'class' => ''
));