diff --git a/packages/grafana-ui/src/components/Switch/Switch.tsx b/packages/grafana-ui/src/components/Switch/Switch.tsx index feee58386b8..f79de95fd2d 100644 --- a/packages/grafana-ui/src/components/Switch/Switch.tsx +++ b/packages/grafana-ui/src/components/Switch/Switch.tsx @@ -17,7 +17,7 @@ export interface State { export class Switch extends PureComponent { state = { - id: _.uniqueId(), + id: _.uniqueId('check-'), }; internalOnChange = (event: React.FormEvent) => { @@ -29,18 +29,20 @@ export class Switch extends PureComponent { render() { const { labelClass = '', switchClass = '', label, checked, transparent, className } = this.props; - const labelId = `check-${this.state.id}`; + const labelId = this.state.id; const labelClassName = `gf-form-label ${labelClass} ${transparent ? 'gf-form-label--transparent' : ''} pointer`; const switchClassName = `gf-form-switch ${switchClass} ${transparent ? 'gf-form-switch--transparent' : ''}`; return ( - +
+ +
); } } diff --git a/public/sass/components/_switch.scss b/public/sass/components/_switch.scss index 92756f81a76..f7980215659 100644 --- a/public/sass/components/_switch.scss +++ b/public/sass/components/_switch.scss @@ -13,6 +13,10 @@ gf-form-switch[disabled] { } } +.gf-form-switch-container-react { + display: flex; +} + .gf-form-switch-container { display: flex; cursor: pointer;