List checkbox doesn't have clickable label
Malvineous opened this issue · comments
In this example the List has both checkboxes and a custom renderItem.
However to select an item you must click on the checkbox itself, you cannot select it by clicking on the text.
Is it possible to move the renderItem content inside the <label for= so that clicking on the text will select the checkbox too?
My reason for asking is that I want to hide the checkbox, and have the background colour change upon selection, so it works more like the traditional list box, as demonstrated here. I only want one item selected so a Radio might be better, but it doesn't seem to have the bordered option like the List does.
If you have any tips on the best way of doing this, please let me know. Many thanks!
@Malvineous Hello friends, I guess what you want is this effect
Due to the diversity of List.Item, we did not select when clicked.
We can provide onRowClick and radio similar to Table to complete the function you want, Do you think this can solve your problem?
Yes! That is exactly the functionality I am looking for, thank you. Your table example would probably work for me, but I plan to have many items and would like a vertical scroll bar once the item list becomes long, which I think List does automatically. If you're able to add those features to List then it would be perfect for me!
@Malvineous You can set the height for the Table or place it in the flex item, the vertical scroll bar will be automatically displayed according to the content.
<Table height={200} {...otherProps} />Thank you - this is now working well for me. It took me a while to realise I had to set the CSS variable --table-selected-row-bg as I thought it wasn't working, because the default selection colour is the same as the table background colour so I couldn't see the selection! But once I changed the variable it works well.