Change size of checkboxes in cells of bootstrap-table

Question

I use bootstrap-table and a column with checkboxes. How can I change size of checkboxes. In my code i want checkbox size 25x25, but when I use height and width css attributes it doesn't work.

html

<table class="table table-striped table-bordered table-hover"  cellspacing="0" id="mainTable" data-click-to-select="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-pagination="true">
    <thead>
    <tr>
        <th data-field="state" data-checkbox="true" data-formatter="starsFormatter"></th>
        <th data-field="name" data-halign="center" data-align="left" data-sortable="true">Name</th>
        <th data-field="stargazers_count" data-formatter="starsFormatter" data-halign="center" data-align="left" data-sortable="true">Stars</th>
        <th data-field="forks_count" data-formatter="forksFormatter" data-halign="center" data-align="left" data-sortable="true">Forks</th>
        <th data-field="description" data-halign="center" data-align="left" data-sortable="true">Description</th>
    </tr>
    </thead>
</table>

javascript

var data = [{name: 'ala', stargazers_count: 234, forks_count: 234, description: "asdasdas"},
           {name: 'ala', stargazers_count: 234, forks_count: 234, description: "asdasdas"},
           {name: 'ala', stargazers_count: 234, forks_count: 234, description: "asdasdas"}]

$('table').bootstrapTable({
    data: data
});

function starsFormatter(row, value, inde) {
    return row + '<i class="glyphicon glyphicon-star"></i> ';
}

function forksFormatter(value) {
    return '<i class="glyphicon glyphicon-cutlery"></i> ' + value;
}

css

.bs-checkbox input{
    height: 25px;
    width: 25px;
}

Try using `!important` to force the style: `{ width:25px!important; height:25px!imporant; }` — Victor Levin, Sep 08 '15 at 20:57
When I tested this it worked fine; you should probably post a working example of the problem in a Snippet. — vanburen, Sep 08 '15 at 22:32
@vanburenx here is snippet http://jsfiddle.net/3L7vgcx0/106/ — Matt, Sep 09 '15 at 07:09
This works in IE & Chrome, not in Firefox. This is a known issue: http://stackoverflow.com/questions/306924/checkbox-size-in-html-css?s=6|0.7482 — mccannf, Sep 10 '15 at 17:00

score 1 · Answer 1 · answered Jun 04 '16 at 20:04

1

Simple and easy way to do it

input[type="checkbox"]{
transform:scale(x,y);
}

x,y can be any value depends upon how much large box you want

answered Jun 04 '16 at 20:04

Code Black

530
5
11

score 0 · Accepted Answer · answered Sep 11 '15 at 07:43

0

.bs-checkbox input
{
    zoom:2;
}

answered Sep 11 '15 at 07:43

Matt

8,195
31
115
225

Change size of checkboxes in cells of bootstrap-table

2 Answers2