Adding style to CakePHP automatically created input div

Question

CakePHP creates a div that automatically wraps any of its input tags that are built with the formhelper as followed:

$this->formhelper->input('something');

Such that the output looks about as followed:

<div class='input'>
    <input />
</div>

I know that there is a way to add classes to the input tag i.e.

$this->formhelper->input('text', array('class' => 'some_css'));

But how would you add a style to the div that is automatically created by CakePHP. This might be something where the core needs to be hacked, but I want to know if there is a better way to do this, so that I get something as followed:

<div class='input other_class_I_want_here'>
    <input />
</div>

Thank you to anyone who can help.

For starters I would recommend reading the documentation - also using $this->Form-> here instead. — mark
– mark, Commented Oct 16, 2013 at 15:29

evansLY · Accepted Answer · 2013-10-16 15:39:56Z

9

Simply add a new class to the div.

$this->formhelper->input('text', array('div'=>array('class'=>'divClass'),'class' => 'some_css'));

should actually output

<div class='input divClass'>
    <input class='other_class_I_want_here' />
</div>

answered Oct 16, 2013 at 15:39

evansLY

1223 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

5

The above answer is certainly correct. And works beautifully if you only require adding a class in a one (or a few) specific locations.

However, anyone arriving here looking for a way to add a class to input div wrappers application-wide (ex: if you're using a front-end framework which often requires a specific class name be added to input wrappers to enable auto-styles) there is a MUCH better solution. That being, a custom FormHelper.

In the App/View/Helper directory create and save a file "MySuperCoolFormHelper.php"

Place the following code in the file:

    App::uses('FormHelper', 'View/Helper');
    
    class MySuperCoolFormHelper extends FormHelper {

        protected function _divOptions($options) {
            if(isset($options['div'])
                $options['div'] .= ' class1 class2 class3'; //note the prefixing space
            else
                $options['div'] = 'class1 class2 class3';

            return parent::_divOptions($options);
        }
    }

To use this new form helper globally, add the following code to your AppController:

    public $helpers = array(
        'Form' => array(
            'className' => 'MySuperCoolFormHelper'
        )
        //The rest of your helper inits
    );

... and BLAMMO you're done!

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 3, 2014 at 16:03

pim

12.7k6 gold badges71 silver badges70 bronze badges

1 Comment

pim Over a year ago

Good question, sorry for omitting!! In your AppController, where you initialize the FormHelper, you simply initialize it slightly differently: public $helpers = array( 'Form' => array( 'className' => 'MySuperCoolFormHelper' ) );

MotsManish · Accepted Answer · 2019-05-24 13:28:10Z

0

CakePHP 3: For applying 'form-group' to DIV and 'form-control' to the input field

<?= 
$this->Form->control('year', [
    'type' => 'select', 
    'value' => $year, 
    'options' => $years, 
    'label' => false, 
    'class' => 'form-control', 
    'templates' => ['inputContainer' => '<div class="form-group">{{content}}</div>']
    ]); 
?>

answered May 24, 2019 at 13:28

MotsManish

4851 gold badge8 silver badges16 bronze badges

Collectives™ on Stack Overflow

Adding style to CakePHP automatically created input div

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related