I have following line of code:
echo $form->input('terms', array('type' => 'checkbox', 'label' => 'I have read and accept the <a target="_blank" href="/terms">Terms</a>.'));
I want custom style on this checkbox. How can I do that in cakephp?
Problem is that error message that is appearing with check box is not aligned properly with other input text fields. So I want to align error message text, so I need either custom style or some other way to solve it. I am getting div of terms field in browser debugger, and when I changed there it works, but I don't know how to change div in cakephp? When I see .ctp file there is no div, so how will I change it. I am new in cakephp so please reply me in detail.
Just set 'label'=>false, and/or 'div'=>false then write your HTML, CSS...etc manually around it any any fashion you see fit.
More info here: CakePHP Book - Form Helper.
You can put a custom class on the field by adding 'class' => 'name' to the array and CakePHP will put that class on the input.
echo $form->input(
'terms',
array(
'type' => 'checkbox',
'class' => 'some-class-name',
'label' => 'I have read and accept the <a target="_blank" href="/terms">Terms</a>.'
));
Produces:
<div class="input checkbox">
<input type="hidden" name="" id="" value="0">
<input type="checkbox" name="" class="some-class-name" value="1" id="">
<label for="">I have read and accept the <a target="_blank" href="/terms">Terms</a>.</label>
</div>
You can apply custom styles to the input using 'style' => 'some:style;'
echo $form->input(
'terms',
array(
'type' => 'checkbox',
'style' => 'width:200px;',
'label' => 'I have read and accept the <a target="_blank" href="/terms">Terms</a>.'
));
Produces:
<div class="input checkbox">
<input type="hidden" name="" id="" value="0">
<input type="checkbox" name="" style="width:200px;" value="1" id="">
<label for="">I have read and accept the <a target="_blank" href="/terms">Terms</a>.</label>
</div>
You can also apply custom styles or classes on the <div> the input is grouped into and to the <label> associated with the <input> as well.
echo $form->input(
'terms',
array(
'type' => 'checkbox',
'label' => array(
'text' => 'I have read and accept the <a target="_blank" href="/terms">Terms</a>.',
'style' => 'width:200px;',
'class' => 'class-for-label'
),
'div' => array(
'style' => 'width:200px;',
'class' => 'class-for-div'
)
));
Produces:
<div class="class-for-div" style="width:200px;">
<input type="hidden" name="" id="" value="0">
<input type="checkbox" name="" value="1" id="">
<label for="" style="width:200px;" class="class-for-label">I have read and accept the <a target="_blank" href="/terms">Terms</a>.</label>
</div>
And finally, as #dave suggested, you can remove the <div> or <label> by setting them to false and insert your own custom HTML.
echo '<div class="input checkbox">';
echo $form->input(
'terms',
array(
'type' => 'checkbox',
'label' => false,
'div' => false
));
echo '<label>I have read and accept the <a target="_blank" href="/terms">Terms</a>.</label>';
echo '</div>';
Produces:
<div class="input checkbox">
<input type="hidden" name="" id="" value="0">
<input type="checkbox" name="" value="1" id="">
<label>I have read and accept the <a target="_blank" href="/terms">Terms</a>.</label>
</div>
source documentation
(I've deleted some element attributes because they are specific to the database, tables and models used)
Related
My code is:
echo $this->Form->control('select', [
'label' => 'sample label text',
'type' => 'select',
'multiple' => true,
'value' => [1,2],
'options' => ['a','b']
]);
The output is now:
<label class="control-label" for="select">sample label text</label>
<input type="hidden" name="select" value="">
<select name="select[]" multiple="multiple" id="select" class="form-control">
<option value="0">a</option>
<option value="1">b</option>
</select>
How should I change my code to add a span between the label and select?
Cakephp 3 create a radio container with label -> input like that
<div class="radio">
<label class="radio-acces-checked" for="condition-access-1">
<input id="condition-access-1" type="radio" value="1" name="condition_access">
Free access
</label>
</div>
...
I would like change structure but it does not work, it's always the same strucure... Do you have an idea about how to solve my problem ?
$myTemplates = [
'radioWrapper' => '<div class="radio">{{label}}{{input}}</div>'
];
echo $this->Form->radio('condition_access', [
['value' => 1, 'text' => __('Free Access')],
['value' => 2, 'text' => __('Payment Access')],
['value' => 3, 'text' => __('Reduce price')]
]);
You need to set the nestingLabel template:
echo $this->Form->input('condition_access', [
'type' => 'radio',
'options' => [
['value' => 1, 'text' => __('Free Access')],
['value' => 2, 'text' => __('Payment Access')],
['value' => 3, 'text' => __('Reduce price')]
],
'templates' => [
'nestingLabel' => '{{hidden}}<label{{attrs}}>{{text}}</label>{{input}}',
'radioWrapper' => '<div class="radio">{{label}}</div>'
]
]);
Output:
<div class="input radio">
<label>Condition Access</label>
<input name="condition_access" value="" type="hidden">
<div class="radio">
<label for="condition-access-1">Free Access</label>
<input name="condition_access" value="1" id="condition-access-1" type="radio">
</div>
<div class="radio">
<label for="condition-access-2">Payment Access</label>
<input name="condition_access" value="2" id="condition-access-2" type="radio">
</div>
<div class="radio">
<label for="condition-access-3">Reduce price</label>
<input name="condition_access" value="3" id="condition-access-3" type="radio">
</div>
</div>
How do I produce the following HTMl using the Cakephp form helper:
<div class="form-group">
<label for="input-Default" class="col-sm-2 control-label">Default</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="input-Default">
</div>
</div>
THanks
Everything you need is in the Html helper.
echo $this->Html->div('form-group',
$this->Html->tag('label', 'Default',
array(
'for' => 'input-Default',
'class' => 'col-sm-2 control-label',
)
) .
$this->Html->div('col-sm-10',
$this->Form->input('',
array(
'type' => 'text',
'class' => 'form-control',
'id' => 'input-Default',
'div' => false,
'label' => false
)
)
)
);
http://book.cakephp.org/2.0/en/core-libraries/helpers/html.html
I am using the TwitterBootstrap Plugin for CakePHP2.x. And I can't get the combination of a horizontal form with a nested inline form to work.
part of my code:
<?php
echo $this->Form->create('Event', array('class' => 'form-horizontal'));
echo $this->Form->input('Event.short_name',array(
'label' => 'Short name',
'type' => 'text',
'class' => 'span5'
));
?>
<div class="control-group">
<div class="control-label">Date & Time</div>
<div class="controls form-inline">
<div class=" input-append">
<?php
echo $this->Form->input('Event.start_date', array(
'label' => false,
'type' => 'text',
'class' => 'span2 start_date',
'after' => '<span class="add-on datetime"><span class="icon-calendar"></span></span>'
));
echo $this->Form->input('Event.end_date', array(
'label' => false,
'type' => 'text',
'class' => 'span2 end_date',
'after' => '<span class="add-on"><span class="icon-calendar"></span></span>'
));
?>
</div>
</div>
</div>
In the above example this happens:
and the generated html
<div class="control-group">
<div class="control-label">Date & Time</div>
<div class="controls form-inline">
<div class=" input-append">
<div class="control-group">
<div class="controls">
<input name="data[Event][start_date]" class="span2 start_date" type="text" value="2013-06-15" id="EventStartDate" required="required"><span class="add-on"><span class="icon-calendar"></span></span>
</div>
</div>
<div class="control-group">
<div class="controls">
<input name="data[Event][end_date]" class="span2 end_date" type="text" value="2013-06-22" id="EventEndDate" required="required"><span class="add-on"><span class="icon-calendar"></span></span>
</div>
</div>
</div>
</div>
</div>
When I add 'div' -> false to the two date form field they move inline but the padding etc is gone.
and the generated html
<div class="control-group">
<div class="control-label">Date & Time</div>
<div class="controls form-inline">
<div class=" input-append">
<input name="data[Event][start_date]" class="span2 start_date" type="text" value="2013-06-15" id="EventStartDate" required="required"><span class="add-on"><span class="icon-calendar"></span></span>
<input name="data[Event][end_date]" class="span2 end_date" type="text" value="2013-06-22" id="EventEndDate" required="required"><span class="add-on"><span class="icon-calendar"></span></span>
</div>
</div>
</div>
I think this is due to the fact that all form fields are placed in controls divs... Does anyone know how to solve this?
I also posted this as an issue on the GitHub page, since I think it has to do with the plugin, but I hope someone knows a temp workarround.
Maybe this could work. I used it before and it looks like this:
<?php echo $this->Form->create('Event', array(
'class' => 'form-horizontal',
'inputDefaults' => array(
'format' => array('before', 'label', 'between', 'input', 'error', 'after'),
'div' => array('class' => 'control-group'),
'label' => array('class' => 'control-label'),
'between' => '<div class="controls">',
'after' => '</div>',
'error' => array('attributes' => array(
'wrap' => 'span', 'class' => 'help-inline'
)),
)));?>
<fieldset>
<?php echo $this->Form->input('Event.start_date', array(
'label' => array('class' => 'control-label',
'text' => 'start date'),
));?>
</fieldset>
<?php echo $this->Form->end();?>
The issue might be conflict between TB and Cake about float and clear, because cake.generic.css sets for form div clear:both which moves elements below instead of next to.
Try this:
div.form-inline div{
clear: none;
}
i am using a CakePHP form Creator
echo $form->input($r['Attribute']['label'], array('id'=>$r['Attribute']['id'],'name'=>$r['Attribute']['label'],'type'=>'text','style' => 'width:30px'));
echo $form->input($r['Attribute']['label'], array('label'=>false,'div' => false,'id'=>$r['Attribute']['id'].'-','name'=>$r['Attribute']['label'],'type'=>'text','style' => 'width:30px'));
which creates a Input Box and the generated Html is like
<div class="input text">
<label for="6">Mobile Number</label>
<input type="text" value="" style="width: 30px;" id="6" name="Mobile Number"/>
</div>
<input type="text" value="" style="width: 30px;" id="6-" name="Mobile Number"/>
But i need this second input Text Box to appear inside the above Div ..Please suggest me.
<div class="input text">
<?php
echo $form->input($r['Attribute']['label'], array('id'=>$r['Attribute']['id'],'name'=>$r['Attribute']['label'],'type'=>'text','style' => 'width:30px', 'div' => false));
echo $form->input($r['Attribute']['label'], array('label'=>false,'div' => false,'id'=>$r['Attribute']['id'].'-','name'=>$r['Attribute']['label'],'type'=>'text','style' => 'width:30px'));
?>
</div>
Note that I've added 'div' => false to the first input too.
But wouldn't this give you two inputs with the same name?