Possible to fix widget size?

Apps & Services HABPanel
, ,
1

I notice that widgets resize when the canvas (browser) width changes.
Because the text and icon sizes remain fixed, the widgets get disfigured.
Is it possible to fix the widget size independent of the canvas size ?

2

Yes, would be great if everything in the widget could be relative to the size of the widget…

3

You need to design your widget to take account of the fact that the container will be resized. As such, you should never use precise values such a 50px or 2em when specifying width / height / margin / padding/ etc…

Instead, you should do everything on a percentage basis. For example:

<div style="padding: 10px">....</div>

Above will probably not work well when scaled, instead do something like:

<div style="padding: 2%">....</div>

It can be a lot more tedious to design, but its worth the effort as otherwise your HabPanel will only work on the single screen / resolution / browser window size that you designed it on.

Few other tips:

  • For images, use SVG if possible and place the images as a background image within a container, setting the image to ‘cover’ the div.
  • For text, use in-line SVG to render the text so that it scales / fits and doesn’t wrap and look ugly

Hope this helps.