CODEWITHSUNDEEP
cakephptwitter-bootstrap
gman88
gman88

Reputation: 41

Form checkbox and label with CakePHP and Bootstrap

I'm having some issues trying to get checkbox inputs and labels to output the correct HTML using CakePHP and Twitter Bootstrap.

The Bootstrap specific output should be:

<div class="control-group">
  <div class="controls">
    <label class="checkbox">
      <input type="checkbox"> Keep me logged in
    </label>
  </div>
</div>

However, using the inputDefaults mentioned here (http://stackoverflow.com/a/9496242/1247225), this Cake form input:

echo $form->input('auto_login', array(
 'type' => 'checkbox', 
 'label' => __('Keep me logged in', true)));

Outputs this:

  <div class="control-group">
    <input type="hidden" name="data[User][auto_login]" id="UserAutoLogin_" value="0" />
    <input type="checkbox" name="data[User][auto_login]" class="" value="1" id="UserAutoLogin" />
    <div class="controls">
      <label for="UserAutoLogin">Keep me logged in</label>
    </div>
  </div>

Any ideas how to adjust this individual input so it outputs the correct Bootstrap HTML, like above?

Upvotes: 4

Views: 16277

Answers (10)

Toan Nguyen Thai
Toan Nguyen Thai

Reputation: 71

In my case, I used AdminLTE template with Bootstrap 3 and this code was working for me:

       <?php
            echo $this->Form->input('Model.fieldname', array(
                'label' => false,
                'type' => 'checkbox',
                'before' => '<label>',
                'after' => 'Field name label here</label>',
            ));
       ?>

Good luck here!!!

Upvotes: 1

laul
laul

Reputation: 57

I using : 

<?php 
echo $this->Form->input('coupDeCoeur', 
array('div' => false,
'label' => false,
'type' => 'checkbox',
'before' => '<label class="checkbox">',
'after' => '<i></i>coupDeCoeur</label>'
));
?>

Upvotes: 3

Breno Mazieiro
Breno Mazieiro

Reputation: 21

If you want a "one line" answer i got it:

echo $this->Form->input('Model.Field', array('class'=>'form-inline', 'after'=>'</br>'));

Upvotes: 1

Jeremiah Crouch
Jeremiah Crouch

Reputation: 66

The best way to control the form output, or the format of the output, is by passing a 'format' argument. Try playing with this:

'format' => array('before', 'label', 'input', 'between', 'after', 'error')

I don't think it is document, but by reading the code, you can find it in there.

Upvotes: 5

Jeremy Burns
Jeremy Burns

Reputation: 1

Here's a simple solution that works for me:

The CSS (LESS):

input.form-control[type="checkbox"] {
    width: auto;
    height: auto;
    margin-right: 5px;
    display: inline;
}

Then use the Form helper:

echo $this->Form->input(
    'field_name',
    array(
        'div' => 'form-group',
        'class' => 'form-control',
        'type' => 'checkbox',
        'label' => array(
            'text' => 'Your label',
            'class' => 'label-checkbox'
        ),
        'format' => array('input', 'label')
    )
);

Upvotes: 0

Fyre
Fyre

Reputation: 11

Here is the ready-to-use solution:

App::uses('FormHelper', 'View/Helper');
class InputHelper extends FormHelper {
    // var $helpers = array('Form', 'Html');
    public function create($model, $options = array()) {
        $options['class'] = (isset($options['class']) && $options['class']) ? $options['class'] : 'form-horizontal table';
        $options['inputDefaults'] = (isset($options['inputDefaults']) && $options['inputDefaults']) ? $options['inputDefaults'] : array(
            'div' => 'control-group',
            'label' => array('class' => 'control-label'),
            'between' => '<div class="controls">',
            'after' => '</div>'
        );
        return parent::create($model, $options);
    }

    public function input($fieldName, $options = array()) {
        $this->setEntity($fieldName);
        $options = $this->_parseOptions($options);
        if ($options['type'] == 'checkbox') {
            $options['format'] = array('before', 'label', 'between', 'input', 'after', 'error');
        }
        fdebug($options);
        return parent::input($fieldName, $options);
    }
}

Upvotes: 1

monsur.hoq
monsur.hoq

Reputation: 1131

Try following code:

<div class="control-group">
    <div class="controls">
        <label class="checkbox">
            <?php echo $this->Form->input('auto_login', array('type'=>'checkbox','label' => false, 'div' => false,'class'=>false,'after'=>__('Keep me logged in')));?>
        </label>
    </div>
</div>

Upvotes: 2

Chris Pierce
Chris Pierce

Reputation: 736

the prettiest way to do it is this:

<?php
echo '<div class="col-lg-2">';
echo $this->Form->input('Content.checkbox', array(
'div' => array(
    'class' => 'input-group',
),
'label' => false,
'type' => 'checkbox',
'before' => '<span class="input-group-addon">',
'after' => '</span><span class="input-group-addon"><label for="ContentCheckbox">What does the fox say?</label></span>',
));
echo '</div>';

Upvotes: 4

Daniel
Daniel

Reputation: 446

If you're using security component, you may have problems if you create your inputs without FormHelper::input. If that's the case, you should try with this:

echo "
<div class='control-group'>
    <div class='controls'>
        <label class='checkbox'>";                    
            echo $this->Form->input('Model.field', array('label' => false, 'after' => 'Model.field'))."
       </label>
    </div>
</div>";

Upvotes: 1

chronon
chronon

Reputation: 568

You need to build the form widget manually for checkboxes instead of using FormHelper::input.

For example:

echo '<div class="control-group">';
echo $this->Form->label('Model.field', null, array('class' => 'control-label')); 
echo '<div class="controls">';
echo $this->Form->checkbox('Model.field');
echo '</div>';
echo '</div>';

Upvotes: 2

Related Questions