I am having problems styling a checkbox in a table

Support
1

Jason Dietrich:
I am having problems styling a checkbox in a table2 column.
I have a checkbox that is styled using the below object and it works fine.

{
  "text": "Urgent recovery?",
  "label": "",
  "model": "recovery.Urgent",
  "styleClasses": "text-sm col-md-12",
  "type": "bfcheckbox1"
}

I am trying to get the same styling in a table2 column. The checkbox is in it’s own column. I have the select column slot as html:

<input type="checkbox" @click.stop="namedAction ('updateAssetList', {AssetChoice: props.row.AssetID})" :checked="_.findIndex(model.AssetList, function(element) { return element == row.AssetID; }) > -1">

I have tried adding a and that does nothing. I have tried and my checkbox disappears. I have tried adding “bfcheckbox1” to the columnClasses. I am sure I have tried other things, but I can’t get that same styling.

Delfs:
bfcheckbox1 is the BF element name (type) not actually a class. Since you are using html in a slot, you have to manually style the the check box html element.

This is an example I found of one style, but do you have something in mind? This one has good accessibility ( keyboard access ) so may be overkill

`

<input id="default-checkbox" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">

`

Delfs:
Note you will need to add you @click back in

Delfs:
you can pick out some other examples here: https://tailwindcomponents.com/components/checkbox

Jason Dietrich:
I was happy with the look of the bfcheckbox1. I am not very experienced with finding the exact styling of the checkbox with all the css code from the web inspector.

image

Delfs:
ok you can try this

<input class="h-6 w-6" type="checkbox" @click.stop="namedAction ('updateAssetList', {AssetChoice: props.row.AssetID})" :checked="_.findIndex(model.AssetList, function(element) { return element == row.AssetID; }) > -1">

note the h-6 w-6 class added

image