Styling of Forms.Checkbox

Grafana Plugin Development
1

I am currently building a React-based datasource plugin with the elements found in @grafana/ui/components/Forms as advised here, with the latest version of @grafana/ui. More specifically, I am working on a QueryCtrl.tsx class including dropdowns, checkboxes etc.

The problem I face comes from the Forms.Checkbox element: Inside a query row, it appears on the top left side of its position, instead of being centered. As of now, I have not been able to solve this by applying any CSS styling whatsoever.

Here is what I have (with or withour CSS):

curr
curr790×433 15.1 KB

Here is what I aim for:
target

Worth mentioning is that (i) using such styling on a simple <input type="checkbox"> works as intended, and (ii) applying “!important” is also of no effect.

I believe I could play around with the FormField label to make it function like the checkbox label I need (since Forms.Label is also differently formatted); as of the Forms.Checkbox formatting, I am rather clueless. Does anyone have any idea on this?

EDIT: the element in the “what I aim for” screenshot is made with <gf-form-checkbox> which comes from the old Angular-styled Grafana.

2

Hi!

We’re still working on the new inline form styles (those usually used in query editors). That’s why it is not working as expected.

/Tobias Skarhed

3

You could try experimenting with the FormLabel component - in 7.0 it will be under LegacyForms.FormLabel though.

4

Thanks for the info @skarhed , I will work with FormLabel for now and keep that about the checkboxes in mind. Are they also planned for 7.0 ?