I have a multi-line Label, with user-defined text, that must fit inside some given dimensions.
<s:HGroup width="400" height="250">
<s:Label id="myText" width="100%"/>
</s:HGroup>
I would like to adjust the font size of myText at runtime, depending on the content of myText.text. What is the best way to do this?
Unfortunately there is no API call or even a straightforward way of doing this. The only way to do this is to iterate over font sizes and check if the text fits within bounds.
Related
My image now: <img src="image.webp" width="100%">
I know, I should use this to prevent cumulative layout shift: <img src="image.webp" width="150" height="200">
But this way it can't fill the div in all screen resolutions, so it is not responsive anymore.
What should I do?
Thank you.
You are probably looking for the css properties max-width and max-height. They will prevent the image from getting any bigger that the width and height you specify, but if the viewport is too small and the would overflow, then they default to the regular width and height, which if not declared would default to auto (but you can also use the width="100%" that you are already using, which is also responsive) and fit on your screen.
You probably want something more robust to make your entire layout re-arange nicely, but max width and height are a good place to start looking
My group component lying inside main application, can change height from 340 to 300 without spoiling the layout. So I set minHeight to 300.
Now if application is resized below the height of 700, this group start spoiling the layout (as it stop reducing in the size as expected).
As a solution I added Scroller control around the group so that scrollbars appear after size goes lower than the scroller control continues to reduce in size. The code for the scroller control is as below:
<s:Scroller id="scrlAnswer" top="220"
bottom="55" x="0" width="600">
<s:Group id="grpAnswers" x="0" y="0" minHeight="300" height="340" width="600">
But the problem is Scroller is not resizing with application.
So my question is is there some other parameter I need to set to make scroller change its size? Is there any other control in Flex for this situation?
=== UPDATE ====
Added resize event to the parent of the scroller control, there manually changed the size of the scroller. Even though the size changed in code but acutual size on screen do not seem to change.
protected function bcMain_resizeHandler(event:ResizeEvent):void
{
scrlAnswer.height = event.target.height* 338/609;
trace("Main:"+event.target.height);
trace("Scroller: "+scrlAnswer.height);
}
Finally figured out the issue. I need to declare the height of the internal group to 100% not a fixed number.
<s:Group id="grpAnswers" x="0" y="0" height="100%" width="600">
The resize event on the scroller is not required.
<s:SkinnableContainer styleName="top" width="1458" height="131" >
<s:VGroup left="50" verticalAlign="middle" height="131" styleName="profile_info">
<s:Image source="#Embed(source='images/logo.png')"/>
</s:VGroup>
</s:SkinnableContainer>
in my application I have this:
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
width="800" height="600" addedToStage="stretchHandler()">
private function stretchHandler():void{
stage.scaleMode = StageScaleMode.SHOW_ALL;
stage.align = StageAlign.TOP;
this.width = stage.stageWidth;
this.height = stage.stageHeight;
}
but the SkinnableContainer and the image inside doesn't scale, how to scale them?
To have your content scale to it's container you must set height and width as a percentage EG:
<s:SkinnableContainer styleName="top" width="100%" height="100%"/>
This would make your container always be the same size of its parent. However content of your container would still follow its own sizing settings.
Layout settings are also important, in a Group two object set to 100% would overlap each other and which ever is higher in the z order will be on top. However in a VGroup the two items at 100%/100% would each take 50% of the height and 100% width.
Note 1: Spark Image acts like a container arround the source image, while "the container" will scale to the parent container, the source image will follow slightly different rules, you have to use Image.fillMode and Image.scaleMode to control it (I recommend reading the docs on this)
Note 2: All UIComponents have min/max hieght/width properties as well as the standard size props
Try this,
All container width and height should be percentage(%) based and Image aswell also for image need to give scaleMode="stretch" fillMode="scale".
<s:SkinnableContainer left="300" styleName="top" width="90%" height="40%">
<s:Image source="#Embed(source='images/logo.png')" width="100%" height="100%" scaleMode="stretch" fillMode="scale"/>
</s:SkinnableContainer>
This will work.
I'm trying to embed a pdf document in html code, and I tried three different approaches, which actually gave me the same result:
<embed src="files/cv_aaragon_en.pdf" width="100%" height="100%">
<object data="files/cv_aaragon_en.pdf" type="application/pdf" width="100%" height="100%">
<p>It appears you don't have a PDF plugin for this browser.
No problem, you can still download the PDF file.</p>
</object>
<iframe src="files/cv_aaragon_en.pdf" width="100%" height="100%">
shown in the figure:
Now I have the following questions:
The frames do not use the entire width of the page (which I believe is normal), because there is a lot of white space to both sides of the gray areas. This doesn't bother me.
If the definition is set to width="100%", why is it not taking the full width? Why are there gray regions? This bothers me because the pdf should be larger so that it becomes readable.
I could change the width, but I don't want to hard code its value so that the page looks good regardless of the device. Is there a way to obtain the actual width and put it in that width definition?
The same with the height, I need it to be much larger, but I don't want to hard-code its value. How is this done?
And finally, given the three approaches above, which one is the best in terms of loading speed?
Thank you.
You can try adding a style tag:
<iframe style="position: absolute; height: 100%" src= "files/cv_aaragon_en.pdf" />
I'm trying to set a Spark list control to 100% height of a View inside of a TabbedViewNavigatorApplication.
<s:List dataProvider="{dp}" itemRenderer="renderers.Renderer" width="100%" height="100%" />
Using this I can't seem to get the list to fit to the view, it always ends up being much too tall.
I'm testing using the Flash Builder mobile profile, the results seem to be the same across all phones. Setting the height to some number under 50% seems to bring the list closer to full width but it's not consistent across phones.
My app container is set for 160DPI
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160" applicationComplete="init(event)">
I haven't come across this issue until I started using TabbedViewNavigatorApplication, 100% seems to work fine in a standard view based application.
Thanks!
If you give an object a % height, Flex will still measure the object's height and use the measured height if it is bigger than the calculated percentage.
To prevent this, specify any non-zero value for minHeight (e.g. minHeight="1"). This tells the layout manager that it's ok for the object to be less than its measured height.
Wanted to give an update, looks like I missed something dumb on my end.
I was creating my ViewNavigators using
var vN:ViewNavigator = new ViewNavigator();
I had set my vN width using
vN.percentWidth=100;
But I forgot to set the height
vN.percentHeight=100;
That seemed to fix everything.
Thanks!