Sunday, January 16, 2011

Sizing Facebook canvas (iframe) application: The Dancing UI

Image by TODO.TO.IT

In the last post I talked about including a magic JavaScript line of code that resizes the iframe dynamically to adjust according to the content.

Soon after I completed dumping content of the page (i.e. powering page from back-end data), the page went to its beauty parlor (i.e. HTML designer/programmer). To keep the page 'low-maintenance', we decided to keep it a variable width layout. He made the page truly variable width and assigned width to the elements only when necessary and that too in percentage.

And the dance stared ...... size of the page was varying all the time.

The script was resizing the iframe as per width of the content and CSS was resizing the content as per size of the iframe. Theoretically, that should not happen and size should have been stabilize. But browsers rendering the percentage values differently and we keeping margins landed us into this situation.

More time we spent figuring out what I wrote in previous paragraph. Seems vary simple and obvious now, but at that time and with the debugging ability (especially for the content rendered in iframe) of the great browsers, we struggled a lot.

As you guessed it right, the simple fix we did was to include a fixed width strip on the top and removed width in percentage from elements.

Problems did not stop here ..... let's talk about them in coming posts.

Stay Tuned!!!