Custom style on checkbox inside form div in cakephp

1
votes

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.

2
cakephp
Can you add the output you are currently getting from the code you are using? – Kristy
Alignment Issue, all fields in form are type = 'selected' and error messages of them are aligned. But when it comes to type = 'checkbox' error message of this checkbox is inside div so it shift more to the right side. I don't why it is going inside div. – Akaash
Take a look at this answer: stackoverflow.com/a/9950731/1646625 – Kristy
#UserRegisterForm .error-message, #UserEditForm .error-message { font-size:1.3em; margin-left:150px; color:#e45b00; padding:0.2em 0 0.5em; } .. I want margin-left:150px; to margin-left:0px; for only checkbox..Can I do it in css? – Akaash
Yes you could, but we would need to see the html code your php file is outputting and your corresponding css to help you. – Kristy

2 Answers

1
votes

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.

1
votes

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)