Here is the hierarchy of my controls:
<Canvas width="100%" height="100%">
<ViewStack width="100%" height="100%">
<box id="box1" width="100%" height="100%">
<AdvancedDataGrid width="100%" height="100%"/>
</box>
<box id="box2" width="100%" height="100%">
<SomeOtherControl width="100%" height="100%"/>
</box>
</ViewStack>
</Canvas>
My ADG is having around 30 - 40 columns and i am seeing two horizontal scroll bars, 1 is coming from ADG which is ok but another one is coming from parent container, so it seems ADG's width is getting assigned more than the parent container.
I can't set the width of ADG to explicit value because it is causing problems in scaling.
Please advise/Help.
Instead of setting width="100%" on your ADG, set it to width="{box1.width}"
Related
I have to use CKEditor to allow users to edit some HTLM pages that may include SVG images. And the links defined in those SVG images contain some attribute like xlink:href. E.g:
<svg preserveaspectratio="xMinYMin meet" version="1.1" viewbox="0 0 778 873" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="100%" width="100%" xlink:href="map.png"></image>
<g class="hover_group" opacity="1">
<a xlink:href="http://www.google.com">
<rect fill="red" height="100" opacity="0.0" width="160" x="110" y="240"></rect>
</a>
</g>
</svg>
I already set CKEDITOR.config.allowedContent = true with hope that all tags and attributes will be retained by the editor.
However, when I switch back and forth between WYSIWYG and HTML mode, I notice that the A tag become like this:
a href="http://www.google.com" xlink:=""
<svg preserveaspectratio="xMinYMin meet" version="1.1" viewbox="0 0 778 873" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="100%" width="100%" xlink:href="map.png"></image>
<g class="hover_group" opacity="1">
<a href="http://www.google.com" xlink:="">
<rect fill="red" height="100" opacity="0.0" width="160" x="110" y="240"></rect>
</a>
</g>
</svg>
This behavior only happens to the A tag, not the IMAGE tag.
Of course, this makes the link in SVG file no longer work.
Anyone know how to fix this? Thanks. I don't want to manually allow all the allowed tags or attributes because this may be so much work.
It is a bug (called also "lack of feature") in CKEditor. It's not able to process attributes ending with ":href" properly.
I reported http://dev.ckeditor.com/ticket/13233 which also includes a possible patch. If it's correct, then this issue will be fixed in the next minor release.
i am tying to solve this problem that is very annoying....
a simple structured html, with an svg element with the width and height of 700px:
<div id="wrapper">
<div id="gameZone">
<div id="background">
<svg id="svgRoot" width="700px" height="700px">
<circle cx="355" cy="600" r="10" id="ball" />
<rect id="pad" height="15px" width="150px" x="280" y="670" rx="10" ry="20"/>
</svg>
</div>
</div>
</div>
the question is why the hell the svg is displyed without the width and height in firefox?
in chrome and ie its working 100%;
please help me solve this problem.
here is an screenshot of the problem: http://shaharmesh.hostingsiteforfree.com/differance.jpg
Firefox debugger show the size as same as the result by svgRoot.getBBox(), the actual svg content bounding size.
To avoid the problem, place a invisible rect which has the same size as the canvas, or other shapes to take up the top-left and bottom-right corners of the svg.
<div id="wrapper">
<div id="gameZone">
<div id="background">
<svg id="svgRoot" width="700" height="700">
<rect width="100%" height="100%" stroke="none" visibility="hidden" pointer-events="none" />
<circle cx="355" cy="600" r="10" id="ball" />
<rect id="pad" height="15" width="150" x="280" y="670" rx="10" ry="20"/>
</svg>
</div>
</div>
</div>
This must be a simple problem, but I can't get my head around it. I have a resizable title window. Inside I just want a VGroup to hold the contents of the form and an HGroup to have a few buttons at the bottom. Very standard stuff.
<!-- Content -->
<s:VGroup id="content" height="340" width="100%">
...more stuff in here...
</s:VGroup>
<!-- Buttons -->
<s:HGroup id="buttonGroup" width="100%">
...buttons in here...
</s:HGroup>
Horizonal resizing works fine. However, I want it to behave such that when the TitleWindow is resized vertically that the buttons stay in the same place relative to the TitleWindow and the content VGroup is resized vertically. But I don't know what to set the height of the VGroup to?
Ideally it would be like this:
height="{this.parent.height - buttonGroup.height - top*
or something like that....
You can also try the following trick:
<s:VGroup id="layoutContainer" width="100%" height="100%">
<s:SkinnableContainer id="content" height="100%">
....content here....
</s:SkinnableContainer>
<!-- Buttons -->
<s:HGroup id="buttonGroup">
... buttons here...
</s:HGroup>
</s:VGroup>
The intent is to make the content-container take as mush as possible vertical space within the VGroup.
Let me know if that worked for you!
Use constraint properties.
You could try for AS:
content.top = 0;
content.bottom = buttonGroup.height;
buttonGroup.bottom = 0;
But better put it to MXML definition of the components
<s:VGroup id="content" top="0" bottom="{buttonGroup.height}" width="100%">
...more stuff in here...
</s:VGroup>
<s:HGroup id="buttonGroup" bottom="0" width="100%">
...buttons in here...
</s:HGroup>
Add some paddings and margins if you like
Hello I am having issue with showing everything from my flex application. It only shows around of the whole application.
My application is as such:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%"
xmlns:local="*">
<mx:ViewStack id="mainstack" width="100%" height="100%" >
<mx:HBox id="Mod1" width="100%" height="100%" label="Mod1" horizontalAlign="center" verticalAlign="middle">
<local:modloader url="Mod1.swf" id="mod1" />
</mx:HBox>
<mx:HBox id="Mod2" width="100%" height="100%" label="Mod2" horizontalAlign="center" verticalAlign="middle">
<local:modloader url="Mod2.swf" id="mod3" />
</mx:HBox>
<mx:HBox id="Mod3" width="100%" height="100%" label="Mod3" horizontalAlign="center" verticalAlign="middle">
<local:modloader url="Mod2.swf" id="mod3" />
</mx:HBox>
</mx:ViewStack>
</s:Application>
I also tried putting the following lines in initialize function of Application container but in vain:
systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL (or TO_FIT);
systemManager.stage.align = StageAlign.TOP;
In fact when using SHOW.ALL..the whole application is as if squeeed to some 50% which makes everything small and this is not nice to view.
I also modified the index.template.html and have put the width and height to 100% instead to explicit values.
BUT my application only shows around 70%..the rest(at the bottom) go beyond the screen. (Just note that my screen resolution is 1366 x 768)*
Any bright idea why this does not work??
Try setting the minHeight property of your application to 100 and see if it helps.
How do I remove the space between tab button and border container.
The code is
<s:TabBar dataProvider="{vsApplication}" >
<s:layout>
<!--<s:ButtonBarHorizontalLayout gap="7" />-->
<s:HorizontalLayout gap="7" paddingBottom="0"/>
</s:layout>
</s:TabBar>
<mx:ViewStack id="vsApplication" width="100%">
<s:NavigatorContent id="ncConfiguration" label="Configuration" width="100%">
<s:BorderContainer width="100%">
</s:BorderContainer>
</s:NavigatorContent>
<s:NavigatorContent id="ncProject" label="Project" width="100%">
<s:BorderContainer width="100%">
<mx:DataGrid id="dgProject" dataProvider="{projectData}" doubleClickEnabled="true" itemDoubleClick="dgProject_itemDoubleClickHandler(event)">
<mx:columns>
<mx:DataGridColumn headerText="Project ID" dataField="ProjectID"/>
<mx:DataGridColumn headerText="Project Name" dataField="ProjectName"/>
<mx:DataGridColumn headerText="Planned Start Date" dataField="PlannedStartDate"/>
<mx:DataGridColumn headerText="Planned End Date" dataField="PlannedEndDate"/>
<mx:DataGridColumn headerText="Actual Start Date" dataField="ActualStartDate"/>
<mx:DataGridColumn headerText="Actual End Date" dataField="ActualEndDate"/>
</mx:columns>
</mx:DataGrid>
</s:BorderContainer>
</s:NavigatorContent>
<s:NavigatorContent id="ncTimesheet" label="Timesheet" width="100%">
<s:BorderContainer width="100%">
</s:BorderContainer>
</s:NavigatorContent >
<s:NavigatorContent id="ncDashboard" label="Dashboard" width="100%">
<s:BorderContainer width="100%">
</s:BorderContainer>
</s:NavigatorContent>
</mx:ViewStack>
I had a similar problem - no padding or gap specified anywhere, but there was a space between the TabBar and the ViewStack.
The fix was to set gap="0" in the layout of the parent component (in my case a Panel with VerticalLayout).
I fixed this by doing the same as Andy but just wrapping the components in another component
from
<s:TabBar dataProvider="{viewStack}"/>
<mx:ViewStack id="viewStack" width="100%" height="25%" creationPolicy="all">
<view:TabA id="tabA"/>
<view:TabB id="tabB"/>
</mx:ViewStack>
to
<s:VGroup gap="0" width="100%">
<s:TabBar dataProvider="{viewStack}"/>
<mx:ViewStack id="viewStack" width="100%" height="25%" creationPolicy="all">
<view:TabA id="tabA"/>
<view:TabB id="tabB"/>
</mx:ViewStack>
</s:VGroup>
In this case I wrapped my tab bar and view stack in a VGroup as I did not want to affect the gaps of any other component in my window.