mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Grafana-UI: Fix checkbox vertical alignment (#35124)
* Grafana-UI: Fix Checkbox vertical layout issues * reorganise css * revert my 'fix' and just go back to setting a min height :(
This commit is contained in:
parent
b3e9087557
commit
32d9b04666
@ -2,6 +2,7 @@ import React, { useState, useCallback } from 'react';
|
||||
import mdx from './Checkbox.mdx';
|
||||
import { Checkbox } from './Checkbox';
|
||||
import { VerticalGroup } from '../Layout/Layout';
|
||||
import { Field } from './Field';
|
||||
|
||||
export default {
|
||||
title: 'Forms/Checkbox',
|
||||
@ -57,3 +58,14 @@ export const StackedList = () => {
|
||||
</VerticalGroup>
|
||||
);
|
||||
};
|
||||
|
||||
export const InAField = () => {
|
||||
return (
|
||||
<Field
|
||||
label="Hidden"
|
||||
description="Annotation queries can be toggled on or of at the top of the dashboard. With this option checked this toggle will be hidden."
|
||||
>
|
||||
<Checkbox name="hide" id="hide" defaultChecked={true} />
|
||||
</Field>
|
||||
);
|
||||
};
|
||||
|
@ -65,6 +65,7 @@ export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme2) => {
|
||||
position: relative;
|
||||
padding-left: ${checkboxSize};
|
||||
vertical-align: middle;
|
||||
min-height: ${theme.spacing(3)};
|
||||
`,
|
||||
input: css`
|
||||
position: absolute;
|
||||
|
Loading…
Reference in New Issue
Block a user