Customizable checkboxes and radio buttons

[Suzanna-Manoj-Williams]

Hi,
I would like to customize the checkboxes and radiobuttons with custom class names and styles. Is there a way possible?

[AllenFang]

@Suzanna-Manoj-Williams, sorry, we didnt support this feature, check #497, I will make these component more customizable in v3.0.0

[Suzanna-Manoj-Williams]

It will be helpful if the checkbox can be a combination of input and label for the input, like below:
`

Check!!

` So we can customize only the checkbox with label and not others.

[AllenFang]

@Suzanna-Manoj-Williams surely.

[hawker000]

I've found this feature is implemented in v2.4.2.
See an example here.

[AllenFang]

haha, yes, This feature has been supported, thanks @hawker000 your remind

[wenom64]

Hi,
it's possible add custom style for width (or change it) in lib\util.js@row63
30px is too narrow for custom checkboxes in my project.

if (isSelectRowDefined) {
  var style = {
    width: 30,
    minWidth: 30
  };
  if (!selectRow.hideSelectColumn) {
    selectRowHeader = _react2.default.createElement('col', { style: style, key: -1 });
  }
}

[AllenFang]

@wenom64, there's no any better solution, but you can use css to override it(There were someones did it)

[wenom64]

Too bad.. I don't like !important, but do I have a choise?! 😄

My solution for now:
jsx

<BootstrapTable
  tableHeaderClass="table-custom-checkboxes"
  tableBodyClass="table-custom-checkboxes"
>

stylesheet

.table-custom-checkboxes > colgroup > col:first-child{
  width: 36px !important;
  min-width: 36px !important;
}

[AllenFang]

@wenom64, #979

[AllenFang]

@wenom64, released on v2.10.0, check example

[wenom64]

Wow, U are the Best... I'm going to try it.