IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Grafana-UI: Fix checkbox vertical alignment (#35124)

Browse Source 
* 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:
Josh Hunt 2021-06-03 13:37:59 +01:00 committed by GitHub
parent b3e9087557
commit 32d9b04666
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
View File

@ -2,6 +2,7 @@ import React, { useState, useCallback } from 'react';
import mdx from './Checkbox.mdx'; import mdx from './Checkbox.mdx';
import { Checkbox } from './Checkbox'; import { Checkbox } from './Checkbox';
import { VerticalGroup } from '../Layout/Layout'; import { VerticalGroup } from '../Layout/Layout';
import { Field } from './Field';
export default { export default {
title: 'Forms/Checkbox', title: 'Forms/Checkbox',
@ -57,3 +58,14 @@ export const StackedList = () => {
</VerticalGroup> </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>
);
};

1
packages/grafana-ui/src/components/Forms/Checkbox.tsx
View File

@ -65,6 +65,7 @@ export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme2) => {
position: relative; position: relative;
padding-left: ${checkboxSize}; padding-left: ${checkboxSize};
vertical-align: middle; vertical-align: middle;
min-height: ${theme.spacing(3)};
`, `,
input: css` input: css`
position: absolute; position: absolute;