What is the actual height of a container without scrollbars? - apache-flex

Probably a silly question but, what is the actual height of a container in Flex without scrollbars? Height and measuredheight seem to tell me what the visual height of a container is, but I want to know that number plus any height that is being 'hidden" below a scrollbar.
Thanks.

You can get the height with this:
box.mx_internal::getScrollableRect().height;

HBox and VBox always resizes to it's children if I remember correctly. So the height/width property will always be that of the content within it.
As for SWFLoader, it acts more like a Canvas. If you want to get the width/height of the content, just use the contentHeight/contentWidth property. The height/width of SWFLoader should be the size of the "Canvas" and not it's children.
I believe for the scrollbar itself, only certain components do that (like canvas), and I believe the algorithm to add the scrollbar is along the lines of if contentHeight > height => add vertical scrollbar. The HBox and VBox shouldn't ever get a scrollbar, unless you specify the 'clipContent' property to true. I personally would steer away from using that and instead just wrap it in a Canvas.

Related

find inner width/height of BorderContainer component

I have a BorderContainer having top:30, bottom:5, left:2, right:2 so that it resizes with the applicaiton.
I have a custom component within it that needs to resize when the container resizes.
The problem is that getting the width and height of the container directly is not working. It seems to have a minimum width and height of 500.
Instead I have to get the width/height of its parent, which is in fact a BorderContainerSkin, then subtract the borderWeight * 2.
Is there a function that returns this?
So are you trying to manage component size inside component? It's not the Flex way. The component's parent should set its children sizes during layout. Try to set percentHeight and percentWidth (or width/height="100%") in your component.

CSS column height and textarea

I have two-column layout with a header and footer. I have created a JSFilddle with demonstrating this.
The left-column will normally have more content than the right-column.
How can I get the right-column to expand to the height of the left column, or just fill the height of the view-port? I have sene examples of something similar, but not with a footer that is always at the bottom of the display.
How can I get the textarea to fill the height of its parent, the right column (I haven't even got close to solving this one).
I've just edited your jsfiddle.
The idea is to set a min-height on your right column block, and have it determining the height of the whole content section instead of inheriting height attribute from its parent.
Secondly, regarding the text-area. This bit is tricky, you need to use javascript to render it upon everytime a user resize their view port, and update the attribute height of the textarea accordingly.
Cheers
minHeight is important incase you have an empty content container and you dont want the footer to be pushed up right under the nose of the header. Hence minheight prevent that from happening. Once the height of the right column exceeds minHeight, the parent div will be expanded accordingly.
I see nothing wrong with h being the height of the viewport if you really want it to always expand full windows. However I recommend using $(window).innerHeight instead of Height(). But again, this is javascript and your code will never render the same thing on different browsers, so keep that in mind :)
$(window).resize(function() { var h = $(window).height(); $('#MyTextarea').css('height', h-300); });

Flex: change containers size to wrap the content

I'm using TitleWindow with PopupManager.
I programmatically add the children to my TitleWindow and I would like the TitleWindow changing its size in order to avoid scroll-bars.
Is there any property to mek the windows wrapping the content in Flex ?
thanks
The way I do this is to give it a minHeight and minWidth, but no height or width properties. That way it shrinks to fit the content.
Be careful, though. If you have too much content it can go off the screen, so set a maxHeight and maxWidth. Or else resize title window based on screen loc and dimensions. Then you still have to handle scrollbars, but it happens much less often.

Set height of Flex Accordion to height of tallest child

By default the height of an Flex Accordion container is the height of the initially selected child. I'd like to be able to set the height to the tallest child so that no resizing or scrolling is necessary when other children are selected.
I do not want to use the resizeToContent property. I want the size of the container to stay constant no matter what child is selected.
My current thought is to extend the accordion class setting the creation policy to "all" and then override the measure function to loop through all the children and find the tallest one and use that for the height. This seems a little kludgy though, so I'd like to know if there is a better approach.
Ultimately my question is: is there a way to set the size of an accordion container such that the container never resizes and scoll bars are never necessary to display any of the children?
IMO your idea is probably the best way to go, one problem with it though, you're still going to have a scroll bar since it will set the height to the child and not take into account the chrome of the accordion. So you will need to add additional height for each header of the accordion.
Simple to figure out the header height and multiply it by the number of children, but still something you should keep in mind.

How to create a Scroll in GridView using ASP.NET

How do I create a scroll in GridView using ASP.NET without using fixed sized div's around it like shown here http://www.aspnettutorials.com/tutorials/controls/gridviewscroll-aspnet2-csharp.aspx .
You can set the div's width or height to a percentage as well, and with overflow:auto, the div contents will scroll if the browser is sized to less than the content.
Without any size settings, your div will simply expand to hold all content, so a percentage, fixed, or inherited size in at least one dimension is required for scrolling to ever occur.
In order to get a scroll bar, you need a fixed height container with overflow set to scroll.
Whether you do it with the grid's properties, like in the example you linked, or by just wrapping it in a Panel with a height and overflow set on it, it doesn't matter much. The key thing is just to get it inside a fixed height container. How you want the UI to look (where the scrollbar is, etc.) will dictate where you create the div.

Resources