I have used the HTML attribute approach to setup my gauges (linear type) and trying to figure out how to best achieve auto-resizing with a clean appearance. When I resize the browser I'd like the gauge to resize proportionally. I've been using the parent div height and width to dynamically set the gauge size accordingly. It works "ok", but I have to calculate gauge size proportions to prevent the gauge from switching horizontal/vertical.
The real problem is the position and size of the labels (value, title, units, etc.). They render according to width; both position and font size. This creates a weird layout with text out of view when say, a narrow vertical gauge is made taller. When you make it shorter it's all bunched up, overlaid and unreadable because the height changed but not the width and so the font size and proportional positioning does not adjust either. Hope I'm making sense!
I tried to figure out a formula to dynamically adjust the font size, etc. this but it's a rabbit hole. Is there a better approach? Is it a limitation?
Note: I admit I am a true beginner, but on the positive side I'm trying to contribute to an open source sailing gauge dashboard project!
Hi everyone,
I have used the HTML attribute approach to setup my gauges (linear type) and trying to figure out how to best achieve auto-resizing with a clean appearance. When I resize the browser I'd like the gauge to resize proportionally. I've been using the parent div height and width to dynamically set the gauge size accordingly. It works "ok", but I have to calculate gauge size proportions to prevent the gauge from switching horizontal/vertical.
The real problem is the position and size of the labels (value, title, units, etc.). They render according to width; both position and font size. This creates a weird layout with text out of view when say, a narrow vertical gauge is made taller. When you make it shorter it's all bunched up, overlaid and unreadable because the height changed but not the width and so the font size and proportional positioning does not adjust either. Hope I'm making sense!
I tried to figure out a formula to dynamically adjust the font size, etc. this but it's a rabbit hole. Is there a better approach? Is it a limitation?
Note: I admit I am a true beginner, but on the positive side I'm trying to contribute to an open source sailing gauge dashboard project!