What is the best way to style an Input.checkbox?

Community Help
1

Hello!

I would like to have a cell with an Inputs.checkbox where the label and options are all on separate lines like so:
example screenshot of Inputs.checkbox not inline

I am currently using a stylesheet cell to do this in my example notebook, but I see that is not ideal.

<style>
  form.oi-ec050e {display: block;}
  .oi-ec050e-checkbox div label {display: block;}
</style>

Any suggestions on how to improve this would be appreciated. Thank you!

1 Like
2

You can append scoped styles to the element like this:

viewof myInput = {
  const form = Inputs.checkbox([1, 2, 3], {label: "my label"});
  const scope = DOM.uid().id;
  form.classList.add(scope);
  form.append(htl.html`<style>
    .${scope} > div, .${scope} > div label { display: block }
  `);
  return form;
}

Here are some other examples of customized checkbox widgets:

1 Like
3

Amazing! Thank you for the quick solution. I had seen the suggestion of using DOM.uid() but didn’t understand how to implement it.

I also added form.style.display = "block"; before returning the form to get the label to be above the checkboxes as well. See the forked notebook.

4

I recommend to instead increase the specificity of the selector:

    form.${scope}, .${scope} > div label { display: block }
5

Thanks. I made that change.