Input wrapper div class in CakePHP 3.0.0

Question

How can I change input wrapper div class in CakePHP 3.0.0.?

My code is:

<?= $this->Form->input('mobile',['div'=>['class'=>'col-md-4'],'class'=>'form-control','label'=>false]) ?>

and it returns:

<div class="input text">
    <input type="text" name="mobile" div="col-md-4" class="form-control" id="mobile">
</div>

I want output like:

<div class="col-md-4">
    <input type="text" name="mobile" class="form-control" id="mobile">
</div>

Solution 1

For CakePHP 3.0 versions ...

... there is no way to just pass on attributes to a template. You'd have to redefine the appropriate form helper templates.

You can either change them globally by using for example FormHelper::templates():

$myTemplates = [
    'inputContainer' => '<div class="col-md-4 input {{type}}{{required}}">{{content}}</div>',
    'inputContainerError' => '<div class="col-md-4 input {{type}}{{required}} error">{{content}}{{error}}</div>'
];
$this->Form->templates($myTemplates);

or only for a specific input via the templates option:

echo $this->Form->input('mobile', [
    'templates' => [
        'inputContainer' => '<div class="col-md-4 input {{type}}{{required}}">{{content}}</div>',
        'inputContainerError' => '<div class="col-md-4 input {{type}}{{required}} error">{{content}}{{error}}</div>'
    ],
    'class' => 'form-control',
    'label' => false
]);

See also

• Cookbook > Views > Helpers > Form > Customizing the Templates FormHelper Uses

As of CakePHP 3.1 ...

... you can use so called template variables. You can placed them anywhere in a template

$myTemplates = [
    'inputContainer' => '<div class="input {{class}} {{type}}{{required}}">{{content}}</div>',
    'inputContainerError' => '<div class="input {{class}} {{type}}{{required}} error">{{content}}{{error}}</div>'
];
$this->Form->templates($myTemplates);

and use the templateVars option to define the values for them

echo $this->Form->input('mobile', [
    'class' => 'form-control',
    'label' => false,
    'templateVars' => [
        'class' => 'col-md-4'
    ]
]);

See also

• Cookbook > Views > Helpers > Form > Adding Additional Template Variables to Templates

Solution 2

This code is working in my application. I think according to your requirement, this will useful.

<?php
                echo $this->Form->input(
                'name', [
                    'class' =>  'full-input',
                    'label' =>  'Class Name :',
                    'templates' => [
                        'inputContainer' => '<div class="full-input-wrapper">{{content}}</div>'
                    ]
                ]);
            ?> 

Comments

[ADmad]

This is the final intended way in 3.0. Modifying the generated html through method options was limiting and people kept requesting for more and more options making the code unwieldy and difficult to maintain. String templates provide lot more flexibility with much lesser code complexity.

[Will]

is there a way to say which template to use per field?

[Warren Sergent]

For anyone who comes here later - templateVars were added in CakePHP 3.1 - book.cakephp.org/3.0/en/views/helpers/…

[ndm]

@WarrenSergent-spakatak.com I'll update my answer later on to include that.

[bemoore]

This puts the class on the input element, not around the control wrapper.

[Aris]

thank you @ndm. Unfortunately the documentation is not so clear.