Centering a "sized" Flex Application in the browser window. For example:Your flex app is 800x600 and your browser is 1440x900.

by shawny 3. May 2008 02:17

Recently I built a Flex application that was required to be a specific size, lets say 800x600.  This was done so that users with smaller monitor resolutions would not have to scroll (go figure).

Anyway, I noticed that there was no way inside flex builder to make the application automatically center inside all of the browser windows.  By default, when Flex Builder creates the html wrapper there is a style applied to the body tag like

<style>

body { margin0px; overflow:hidden }

</style>

In order to make the Flex application center in the browser window (regardless of size) you need to change this tag

<style>

body { margin-left:auto; margin-right: auto; width: 800px; overflow:hidden }

</style>

Explicit width on the body is necessary because the html page does not know the size of the embedded flex application.  This is just one solution but I found it the easiest to implement.  The html wrapper can also contain divs and all sorts of other html content.  So for example, if you are creating a webpage in .Net and want to embed a flex application as part of the page, divs in the wrapper will work.  You can also just cut and paste the html wrapper code from the generated wrapper, modify the paths in the script and noscript tags, and insert that into the .Net .aspx page.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: ,

Tips and Tricks

Add comment


(Will show your Gravatar icon)  

  Country flag

biuquote
  • Comment
  • Preview
Loading



Powered by BlogEngine.NET 1.4.5.0
Theme by Mads Kristensen

RecentComments

Comment RSS

RecentPosts