Replies: 1 comment 1 reply
-
|
@samant-rags tagging you as some of your questions are related to this. |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
For now i am using - turn off "Use Grafana scrollbar" and adding custom css Thanks Ole ! |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
This isn't really a bug, but more of a CSS thing.
JSON model for the dashboard used above in the gif
{ "annotations": { "list": [ { "builtIn": 1, "datasource": { "type": "grafana", "uid": "-- Grafana --" }, "enable": true, "hide": true, "iconColor": "rgba(0, 211, 255, 1)", "name": "Annotations & Alerts", "target": { "limit": 100, "matchAny": false, "tags": [], "type": "dashboard" }, "type": "dashboard" } ] }, "editable": true, "fiscalYearStartMonth": 0, "graphTooltip": 0, "id": 8, "links": [], "liveNow": false, "panels": [ { "datasource": { "type": "datasource", "uid": "grafana" }, "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 80 } ] } }, "overrides": [] }, "gridPos": { "h": 8, "w": 12, "x": 0, "y": 0 }, "id": 2, "options": { "SVGBaseFix": true, "add100Percentage": true, "calcsMutation": "standard", "centerAlignContent": true, "codeData": "{\n \"text\": \"Random text\"\n}", "css": "* {\n font-family: Open Sans;\n}\n", "dynamicData": false, "dynamicFieldDisplayValues": false, "dynamicHtmlGraphics": false, "dynamicProps": false, "html": "<div style=\"background: #141;\">\n <div>a</div>\n <div>b</div>\n <div>c</div>\n <div>d</div>\n <div>e</div>\n <div>f</div>\n <div>g</div>\n <div>h</div>\n <div>i</div>\n <div>j</div>\n <div>k</div>\n <div>l</div>\n <div>m</div>\n <div>n</div>\n <div>o</div>\n <div>p</div>\n <div>q</div>\n <div>r</div>\n <div>s</div>\n <div>t</div>\n <div>u</div>\n <div>v</div>\n <div>w</div>\n <div>x</div>\n <div>y</div>\n <div>z</div>\n</div>", "onInit": "", "onInitOnResize": false, "onRender": "", "overflow": "visible", "panelupdateOnMount": true, "reduceOptions": { "calcs": [ "lastNotNull", "last", "firstNotNull", "first", "min", "max", "mean", "sum", "count", "range", "delta", "step", "diff", "logmin", "allIsZero", "allIsNull", "diffperc" ] }, "renderOnMount": true, "rootCSS": "", "useGrafanaScrollbar": true }, "title": "Fit, Center, Grafana scrollbar", "type": "gapit-htmlgraphics-panel" }, { "datasource": { "type": "datasource", "uid": "grafana" }, "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 80 } ] } }, "overrides": [] }, "gridPos": { "h": 8, "w": 12, "x": 12, "y": 0 }, "id": 3, "options": { "SVGBaseFix": true, "add100Percentage": false, "calcsMutation": "standard", "centerAlignContent": true, "codeData": "{\n \"text\": \"Random text\"\n}", "css": "* {\n font-family: Open Sans;\n}\n", "dynamicData": false, "dynamicFieldDisplayValues": false, "dynamicHtmlGraphics": false, "dynamicProps": false, "html": "<div style=\"background: #141;\">\n <div>a</div>\n <div>b</div>\n <div>c</div>\n <div>d</div>\n <div>e</div>\n <div>f</div>\n <div>g</div>\n <div>h</div>\n <div>i</div>\n <div>j</div>\n <div>k</div>\n <div>l</div>\n <div>m</div>\n <div>n</div>\n <div>o</div>\n <div>p</div>\n <div>q</div>\n <div>r</div>\n <div>s</div>\n <div>t</div>\n <div>u</div>\n <div>v</div>\n <div>w</div>\n <div>x</div>\n <div>y</div>\n <div>z</div>\n</div>", "onInit": "", "onInitOnResize": false, "onRender": "", "overflow": "visible", "panelupdateOnMount": true, "reduceOptions": { "calcs": [ "lastNotNull", "last", "firstNotNull", "first", "min", "max", "mean", "sum", "count", "range", "delta", "step", "diff", "logmin", "allIsZero", "allIsNull", "diffperc" ] }, "renderOnMount": true, "rootCSS": "", "useGrafanaScrollbar": true }, "title": "Center, Grafana scrollbar", "type": "gapit-htmlgraphics-panel" }, { "datasource": { "type": "datasource", "uid": "grafana" }, "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 80 } ] } }, "overrides": [] }, "gridPos": { "h": 8, "w": 12, "x": 0, "y": 8 }, "id": 4, "options": { "SVGBaseFix": true, "add100Percentage": false, "calcsMutation": "standard", "centerAlignContent": false, "codeData": "{\n \"text\": \"Random text\"\n}", "css": "* {\n font-family: Open Sans;\n}\n", "dynamicData": false, "dynamicFieldDisplayValues": false, "dynamicHtmlGraphics": false, "dynamicProps": false, "html": "<div style=\"background: #141;\">\n <div>a</div>\n <div>b</div>\n <div>c</div>\n <div>d</div>\n <div>e</div>\n <div>f</div>\n <div>g</div>\n <div>h</div>\n <div>i</div>\n <div>j</div>\n <div>k</div>\n <div>l</div>\n <div>m</div>\n <div>n</div>\n <div>o</div>\n <div>p</div>\n <div>q</div>\n <div>r</div>\n <div>s</div>\n <div>t</div>\n <div>u</div>\n <div>v</div>\n <div>w</div>\n <div>x</div>\n <div>y</div>\n <div>z</div>\n</div>", "onInit": "", "onInitOnResize": false, "onRender": "", "overflow": "visible", "panelupdateOnMount": true, "reduceOptions": { "calcs": [ "lastNotNull", "last", "firstNotNull", "first", "min", "max", "mean", "sum", "count", "range", "delta", "step", "diff", "logmin", "allIsZero", "allIsNull", "diffperc" ] }, "renderOnMount": true, "rootCSS": "", "useGrafanaScrollbar": true }, "title": "Grafana scrollbar", "type": "gapit-htmlgraphics-panel" }, { "datasource": { "type": "datasource", "uid": "grafana" }, "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 80 } ] } }, "overrides": [] }, "gridPos": { "h": 8, "w": 12, "x": 12, "y": 8 }, "id": 5, "options": { "SVGBaseFix": true, "add100Percentage": true, "calcsMutation": "standard", "centerAlignContent": false, "codeData": "{\n \"text\": \"Random text\"\n}", "css": "* {\n font-family: Open Sans;\n}\n", "dynamicData": false, "dynamicFieldDisplayValues": false, "dynamicHtmlGraphics": false, "dynamicProps": false, "html": "<div style=\"background: #141;\">\n <div>a</div>\n <div>b</div>\n <div>c</div>\n <div>d</div>\n <div>e</div>\n <div>f</div>\n <div>g</div>\n <div>h</div>\n <div>i</div>\n <div>j</div>\n <div>k</div>\n <div>l</div>\n <div>m</div>\n <div>n</div>\n <div>o</div>\n <div>p</div>\n <div>q</div>\n <div>r</div>\n <div>s</div>\n <div>t</div>\n <div>u</div>\n <div>v</div>\n <div>w</div>\n <div>x</div>\n <div>y</div>\n <div>z</div>\n</div>", "onInit": "", "onInitOnResize": false, "onRender": "", "overflow": "auto", "panelupdateOnMount": true, "reduceOptions": { "calcs": [ "lastNotNull", "last", "firstNotNull", "first", "min", "max", "mean", "sum", "count", "range", "delta", "step", "diff", "logmin", "allIsZero", "allIsNull", "diffperc" ] }, "renderOnMount": true, "rootCSS": "", "useGrafanaScrollbar": false }, "title": "Fit, Auto overflow", "type": "gapit-htmlgraphics-panel" }, { "datasource": { "type": "datasource", "uid": "grafana" }, "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 80 } ] } }, "overrides": [] }, "gridPos": { "h": 8, "w": 12, "x": 0, "y": 16 }, "id": 6, "options": { "SVGBaseFix": true, "add100Percentage": true, "calcsMutation": "standard", "centerAlignContent": true, "codeData": "{\n \"text\": \"Random text\"\n}", "css": "* {\n font-family: Open Sans;\n}\n", "dynamicData": false, "dynamicFieldDisplayValues": false, "dynamicHtmlGraphics": false, "dynamicProps": false, "html": "<div style=\"background: #141;\">\n <div>a</div>\n <div>b</div>\n <div>c</div>\n <div>d</div>\n <div>e</div>\n <div>f</div>\n <div>g</div>\n <div>h</div>\n <div>i</div>\n <div>j</div>\n <div>k</div>\n <div>l</div>\n <div>m</div>\n <div>n</div>\n <div>o</div>\n <div>p</div>\n <div>q</div>\n <div>r</div>\n <div>s</div>\n <div>t</div>\n <div>u</div>\n <div>v</div>\n <div>w</div>\n <div>x</div>\n <div>y</div>\n <div>z</div>\n</div>", "onInit": "", "onInitOnResize": false, "onRender": "", "overflow": "visible", "panelupdateOnMount": true, "reduceOptions": { "calcs": [ "lastNotNull", "last", "firstNotNull", "first", "min", "max", "mean", "sum", "count", "range", "delta", "step", "diff", "logmin", "allIsZero", "allIsNull", "diffperc" ] }, "renderOnMount": true, "rootCSS": "", "useGrafanaScrollbar": false }, "title": "No Grafana scrollbar", "type": "gapit-htmlgraphics-panel" } ], "schemaVersion": 36, "style": "dark", "tags": [], "templating": { "list": [] }, "time": { "from": "now-6h", "to": "now" }, "timepicker": {}, "timezone": "", "title": "HTMLGraphics (scrollbar)", "uid": "ibjv0cl7z", "version": 10, "weekStart": "" }After adding the "Use Grafana scrollbar" option, some CSS doesn't work well with it. Mainly height and flex with align-items (vertical-align) CSS styles.
"Fit content to panel" adds height 100%
"Center align content" adds align-items (vertical-align)
If anyone's having trouble with those, you can either turn off "Use Grafana scrollbar" or turn off "Fit content to panel" and/or "Center align content".
Beta Was this translation helpful? Give feedback.
All reactions