1

I have a jqxgrid with a column that has columntype:'checkbox'. I would like to make the size of the checkbox bigger. I tried with javascript with something like

$(".jqx-checkbox-default").children().css("width","19px");

but it doesn't work as i should as when i check a box all the checkboxes in the grid are again getting smaller. I also tried with cellrenderer: 

<div style="position: absolute; top: 50%; left: 50%; margin-top: -7px; margin-left: -10px; cursor: auto;" id="jqxWidget3d79f0d1" tabindex="0" class="jqx-widget jqx-checkbox">
    <div class="jqx-checkbox-default jqx-fill-state-normal jqx-rc-all">
        <div style="width: 19px; height: 19px;">
            <span style="width: 19px; height: 19px;"></span>
        </div>
    </div>
    <div style="clear: both;">
    </div>
</div>

but with this i cannot check (also there is the problem with the widget id). Is there a more "normal" solution?

Thanks, Alex

Jerodev
  • 32,252
  • 11
  • 87
  • 108
user3195199
  • 81
  • 10

2 Answers2

1

You can override the styles used by the grid

.jqx-checkbox-default > div, .jqx-checkbox-default > div > span {
    width: 19px !important;
    height: 19px !important;
}

.jqx-checkbox-check-checked {
    background-size: 19px 19px;
}

The first block is to size the checkbox container, the second block is to size the image used for the check state.

I tested this out on the grid checkbox selection demo (http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/checkboxselection.htm?arctic) and just injected those styles into the page styles used with Chrome.

dfperry
  • 2,258
  • 1
  • 14
  • 22
0

in your Grid declaration under columns you can specify the width for each column. i have mine like this and it works for every column type aswell.

{text: 'Active', datafield: 'pActive', width: 45, columntype : 'checkbox', filtertype : 'bool' },

seri
  • 1
  • 1