Bootstrap 3 checkbox css style in yii2 active form

Question

I have third-party CSS, and I want to use it in a Yii2 ActiveForm.

The problem here is: How should I give the classes to a form field? I tried the following but I am not able to get the desired output.

<div class="checkbox checkbox-success">
    <?= $form->field($model, 'is_sold')->checkbox(); ?>
</div>

I also tried the following:

<div class="checkbox">
    <?= $form->field($model, 'is_sold')->checkbox(['class'=>'checkbox-success']); ?>
</div>

But it renders the HTML code like this:

<div class="checkbox checkbox-success">
<div class="form-group field-mainads-is_sold has-success">

<input type="hidden" name="MainAds[is_sold]" value="0">
   <label>
     <input type="checkbox" id="mainads-is_sold" name="MainAds[is_sold]" value="1">
     Mark as Sold
   </label>
</div>        
</div>

And the desired output I want is something like the following:

<div class="checkbox checkbox-success">
    <input class="styled styled" id="checkbox10" type="checkbox">
    <label for="checkbox10">
        This too
    </label>
</div>

I have also tried this:

 <?= $form->field($model, 'is_sold', ['options' =>  ['class' => 'checkbox checkbox-success']])->checkbox([] ,false) ?>

But it didn't work as well, and it gave output like below:

<div class="checkbox checkbox-success field-mainads-is_sold has-success">
    <label class="control-label" for="mainads-is_sold">Mark as Sold</label>
    <input type="hidden" name="MainAds[is_sold]" value="0">
    <input type="checkbox" id="mainads-is_sold" name="MainAds[is_sold]" value="1">
</div>

The first checkbox in the below image is what I get if I write the HTML code directly, but I want to do it using an ActiveForm field. The second checkbox in the image is what I get with form field code.

Андрей К · Accepted Answer · 2016-03-03 21:35:22Z

3

I found a solution. Try this:

<?php $checkboxTemplate = '<div class="checkbox i-checks">{beginLabel}{input}{labelTitle}{endLabel}{error}{hint}</div>'; ?>
<?= $form->field($model, 'rememberMe')->checkbox(['template' => $checkboxTemplate]); ?>

And my result:

<div class="form-group field-loginform-rememberme">
    <div class="checkbox i-checks">
        <label for="loginform-rememberme">
            <input type="hidden" name="LoginForm[rememberMe]" value="0">     
            <input type="checkbox" id="loginform-rememberme" name="LoginForm[rememberMe]" value="1" checked="">
            Remember Me
        </label>
        <p class="help-block help-block-error"></p>
    </div>
</div>

answered Mar 3, 2016 at 21:35

Андрей К

313 bronze badges

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

Comments

Gajen Sunthara · Accepted Answer · 2016-06-04 14:06:58Z

1

If you are looking for materialize css design, this template route works.

<?
    $checkboxTemplate = '<label>Terms and Conditions</label><div class="switch">{beginLabel}No{input}{labelTitle}<span class="lever"></span>Yes{endLabel}{error}{hint}</div>';
    echo $form->field($model, 'terms', ['options' =>  ['class' => 'form-group required']])->checkbox(['template' => $checkboxTemplate])->label('');
?>

answered Jun 4, 2016 at 14:06

Gajen Sunthara

4,87640 silver badges23 bronze badges

Comments

Double H · Accepted Answer · 2015-11-18 06:12:43Z

0

Try Something like : -

 <?= $form->field($model, 'is_sold' ,['options' =>  ['class' => 'checkbox checkbox-success']])->checkbox([] ,false) ?>

answered Nov 18, 2015 at 6:12

Double H

4,1901 gold badge17 silver badges27 bronze badges

1 Comment

Mike Ross Over a year ago

i meant about the look and feel of the checkbox. Its not what it should display using the css.

Collectives™ on Stack Overflow

Bootstrap 3 checkbox css style in yii2 active form

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related