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.
Related
If you have a view box set too large, the page will scroll. Is there a way to make a view box fit the size of any given browser? For example, I am on a 1600 x 1900 browser right now with this view box:
<svg viewBox="-300 0 1920 995">
and my page scrolls. I made the webpage on a 1080p monitor originally and the page did not scroll.
You've kind of got things the wrong way round. The viewBox is what you use to make SVGs responsive. It tells the browser how to scale the contents of your SVG to fit the parent.
The width and height attributes are what sets the size of the SVG.
What you need to do is restrict the size of the SVG to your window. Then the viewBox will let you size the content to fit.
For example:
html, body {
margin: 0;
overflow: hidden;
height: 100%
}
<svg width="100%" height="100%" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="rebeccapurple"/>
</svg>
In this example. I've forced the <body> to match the window size. Then made the SVG fill that.
Make the example full screen. Then try enlarging and shrinking the window. Make it narrow or wide. The circle will automatically resize so it fits in the window.
So, i've been trying to make a portfolio page and i want to use custom shapes. So instead of use divs, i'm using a svg polygon shape to have the background img. Note, this is the first time i deal with svg and i'm trying to fix it the whole day.
So basically, the problem is, the border on the left-bottom and on the top-right is cutting out the edge of my shpe. I tried to reduce the the width/height of the polygon but it's not working properly. It stays to small or cut even more making it a swuare shape..
This is my html code and also a working jsfiddle: http://jsfiddle.net/1rmd2otz/1/
<div class="sv-img">
<svg class="svg" viewBox="0 0 910 500" >
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="900" height="490">
<image xlink:href="img/service/website.jpg" x="0" y="0" width="890" height="480" />
</pattern>
</defs>
<polygon points="96.729,27.124 0,490.109 867.032,420.878 900,0" fill="url(#img1)"/>
</svg>
</div>
So, can anyone help me?
Okay I see a couple of things wrong. Let's start with the first and work through it.
For a start, your polygon is 900x490, but you are specifying a pattern with dimensions of 890x480. So that's part of the reason why you are getting "trimmed" corners - your pattern isn't extending the full width and height of the polygon.
If we fix that, we get almost there. I've added a red line to show the polygon outline more clearly.
Here's a demo.
It is still not quite right. There are still little gaps at the top and bottom. The reason for this is because the aspect ratio of your polygon/pattern (900/490 ~= 1.84) is not the same as the aspect ratio of your image (570/300 = 1.9). What the renderer is doing is scaling the 500x370 image up to fit inside the dimensions you specify for your <image>, whilst keeping the same aspect ratio. That results in an image that is 900 x 473.7 (473.7 = 900/1.9), centred vertically in your 900x490 pattern. That's leaving roughly 6 pixels at the top and bottom.
There are a few ways to fix that. Obviously one would be to change either the image or the polygon so their aspect ratios match exactly.
Another way to fix this is to change the way the image gets scaled. By default, the image gets scaled up to fit the width and height you specify, but doesn't go outside those dimensions. This means that sometimes a gap will be left - like we are seeing. You can change it to a different scaling mode which tells it to scale to fit the maximum dimension leaving no gaps. You do that by setting preserveAspectRatio="xMidYMid slice" on the image.
<image xlink:href="[...snip...]"
x="0" y="0" width="900" height="490" preserveAspectRatio="xMidYMid slice"/>
Here's a demo of that.
You can see that the polygon is completely filled now.
You can read more about preserveAspectRatio here.
It looks like your issue is in the polygon points. Change ...
<polygon points="96.729,27.124 0,490.109 867.032,420.878 900,0" fill="url(#img1)"/>
To ...
<polygon points="96.729,27.124 10,470.109 867.032,420.878 890,10" fill="url(#img1)"/>
jsFiddle: http://jsfiddle.net/rfornal/1rmd2otz/3/
This may not be EXACTLY what you want, but should get you moving in the right direction. You MIGHT be able to do this on the other side and change the SVG viewBox values (widen them).
I am trying to place the text content on an image loaded from assets:
<s:Image id="mainB" depth="1" height="100%" width="100%" source="assets/img/board.png"/>
simageid.width
simageid.height
When I try to get the width and height on mobile devices, it returns the image's rendered height on screen. On tablets, it doesn't return the rendered height. When placing the element dynamically based on height and width, it gets misplaced on tablets.
How can I consistently get the rendered height for the image across all mobile platforms?
I'm using Flex 4.6.0.
Try listening for the updateComplete event before you grab the height or width of an Image in flex because it has to asynchronously load it first.
<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.
My component has lots of inner components.
When i resize the container component (panel), i want all inner components resize with same ratio. Which function should i use?
Set the width and height to a percentage instead of a hard-coded value.
<s:Panel title="Flexible Container" backgroundColor="0x00FF00"
width="75%" height="75%">
<s:TextArea id="mTA" height="100%" width="100%"
text="Text Area Resize" />
</s:Panel>