ansaurus

Question

Relative Positioning at bottom of the screen issue with Flex and different browsers

Answer 1

A:

You could wrap the output in a containing <div>, then using YUI's getClientRegion, and a resize event for good measure, set the containing div's CSS height property to the value which YUI has determined the available viewport vertical space.

Sorry the solution is an outside-of-Flex one, but it'll work.

Edit: I meant 'getViewportHeight()' not 'getClientRegion()', sorry, check out the APi docs though, there's plenty of goodies in there for this sort of stuff.

Danjah 2010-07-04 22:40:42

I'm going to try this. I just wish it can be done all in Flex so that I don't have to include YUI in my code as Flex file is generally big to download by itself.

Tam 2010-07-07 22:03:29

Fair call, it bothers me too sometimes that this sort of thing has to be done. I suppose in this case it's Flex versus Wild (UA's). Perhaps they could benefit from their own set of 'browser integration' fixes - though I can't honestly say I haven't seen this - maybe they do have these tools? In any event, the only YUI dependency file you'll need is yahoo-dom-event.js @ 37k minified - not toooo shabby.

Danjah 2010-07-07 23:00:19

Answer 2

A:

Flex is just a flash component in a web page. Its size depends of what is outside of flex. I don't think you'll get a proper answer unless you post HTML/JS code surrounding flex app.

PS. From my experience working with browser height may be very troublesome.

ghaxx 2010-07-08 11:09:05

Yep. 100% height is buggy at best. Good luck.

Ryan Kinal 2010-07-09 11:56:30

Answer 3

A:

this normally happens when you have one or more positioning elements in a page. Check your code to see if you have used the position element anywhere else in your code, if so are they different, i.e one relative and the other absolute, if so this could be your problem, its reccomended that they are all the same, ie all relative

Ryan Murphy 2010-07-12 08:21:07

Answer 4

+1 A:

Try something like this in the <head></head> section of the HTML page that loads your Flex Application:

<style type="text/css">
    html, body{ 
        width: 100%;  /* make the body expand to fill the visible window */
        height: 100%;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        overflow: hidden;
    }

</style>

Not sure it will help in your case but it's easy to try.

Glenn 2010-07-13 02:13:16

This is where I would expect the problem to be. Flash Player is very consistent across all browsers, so it is almost certainly a surrounding mark-up issue that is causing problems for you. By ensuring your html is exactly 100% tall, with no margins or padding, that should always grant full page height to Flex assuming there's nothing else in your html (is there?). If that doesn't fix it, something else in your Flex in that ....... section is another likely culprit.

Dan M 2010-07-13 03:35:26

ansaurus

tags:

views:

answers:

Relative Positioning at bottom of the screen issue with Flex and different browsers

related questions