How can I tell a widget to maximize to fill the whole space available?

Question

I'm developing a widget for mobile phones using the Vodafone Mobile Widget Platform and I'm trying to get it to fill the entire screen. Using height and width to 100% doesn't seem to work as expected. Anyone know what to do?

Answer 1

First, try adding height="100%" and width="100%" to your body tag as well (not just your container div).

If that does not work, try this css in addition to it.

html{
width:100%;
height:100%;
} 

If that does not work, please provide more information about the page contents that will not fill the entire screen.

Answer 2

Ok, try this:

function resizeWidget() {
var availWidth = screen.availWidth;
var availHeight = screen.availHeight;
window.resizeTo(availWidth, availHeight);
}

Check out this document for more info: http://widget.developer.vodafone.com/docs/Different-Resolutions-on-Mobile-Phones-v0.3.4.pdf

During the execution of a widget, the resolution of the phone can change. For example, newer mobile phones have sensors to detect whether the phone is held horizontally or vertically. The Vodafone Apps Manager recognizes such changes and fires a resolution-event every time there is a change. To make sure your widget is resized every time the resolution changes, you can add an event listener for the resolutionevent and use the resizeWidget() function as event handler:

widget.addEventListener('resolution', resizeWidget, false);

Additionally, you should call the resizeWidget-function when the widget starts, because a user could start the widget in landscape mode. As the runtime does not raise a resolution-event when this happens you have to call the resizeWidget-function manually.

Answer 3

Try this:

   if (window.widget) {
      widget.addEventListener("widgetmodechange", function (e) {
        if (!(widget.widgetMode === "widget")) { // not on desktop
          window.resizeTo(screen.availWidth, screen.availHeight);
        }
      }, false);
    }

Baa is actually right, except you should bind the listener too "widgetmodechange". Also, check out the documentation Baa specified. It's pretty helpful.

Answer 4

I suggest that you use a "too big" width and height in the config.xml like so:

<width>2000</width>
<height>2000</height>

the widget runtime scales down the size. To make it perfect you still need to set the CSS

body, html{
    width:100%;
    height:100%;
} 

to make the widget properly scale to full width and height. I am working with vf widgets for long and that works best. NOte: this makes the widget tooo big on the desktop, but a widget for mobile and desktop is rare anyway imho.

Wolfram