Connect with:
About Me
Alessandro Annini
I'm a freelance developer currently working at I really love framework and its amazing potential and if you're like me, and you want the web to win, please share some snippet of code for the community and grow faster with us
Meta Code | Simple Widget with Auto Size

Simple Widget with Auto Size

02 Jul Simple Widget with Auto Size

Quite a few developers in ask about getting the size of the parent from their view.  I have written a simple widget to show how you can update your widget based on the parent size changing.

In this case, the widget is added to the main context, so the size will be the size of my screen (window) in the browser.  You could also add it to another parent that has a size that is constant but may change based on a change in the app.

The widget will track the size change and update accordingly:

  • Changes the size based on the percentage of the parent size
  • Changes font size
  • On the mobile device, rotating the device will change the size of the screen

You can play with my “Queen Bee” demo I wrote that uses this widget as its background.

Here is Queen Bee on jsfiddle.

Hope this helps give you a hint to how to get sizing correct on your widgets and views.

NOTE: You can extend the ContextualView and use the .commit method as I have done here.


  • pandafinity

    Hi 🙂

    I wanted to ask if you have been through any of your examples with the new version of (0.3.0) ?

    I ask as it seems to have broken a few things – example is here where the SimpleWidget is only a quarter of the size it is meant to be.

    Has anyone seen why this is?

    Thank you for your help guys 🙂

    • no, i’m sorry, not yet, but i plan to make something in the next few weeks!