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):
Here is what I aim for:
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.