You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@flex.apache.org by "Josh Tynjala (JIRA)" <ji...@apache.org> on 2017/06/07 17:51:18 UTC
[jira] [Updated] (FLEX-35322) Layout of NumericStepper is broken
[ https://issues.apache.org/jira/browse/FLEX-35322?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]
Josh Tynjala updated FLEX-35322:
--------------------------------
Attachment: Screen Shot 2017-06-07 at 10.47.56 AM.png
In a release0.8.0 nightly build from today, I'm still seeing issues with NumericStepper. The buttons appear on the right side instead of below the text input, but they're still super small. See the attached screenshot.
My code:
{code}
<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/flexjs/express"
xmlns:basic="library://ns.apache.org/flexjs/basic">
<js:initialView>
<js:View>
<js:style>
<basic:SimpleCSSStyles padding="10" />
</js:style>
<js:Panel title="Loan Payment Calculator">
<js:beads>
<js:VerticalLayoutWithPaddingAndGap
paddingTop="10"
paddingRight="10"
paddingBottom="10"
paddingLeft="10"
gap="6"/>
</js:beads>
<js:Group>
<js:beads>
<js:FlexibleFirstChildHorizontalLayout/>
</js:beads>
<js:Label text="Principal"/>
<js:Spacer width="6"/>
<js:NumericStepper
id="principalStepper"
minimum="0"
maximum="1000000000"
value="200000"
stepSize="1000"/>
</js:Group>
<js:Group>
<js:beads>
<js:FlexibleFirstChildHorizontalLayout/>
</js:beads>
<js:Label text="Interest"/>
<js:Spacer width="6"/>
<js:NumericStepper
id="interestStepper"
value="6.0"
minimum="0.1"
maximum="100.0"
stepSize="0.1"
snapInterval="0.1"/>
</js:Group>
<js:Group>
<js:beads>
<js:FlexibleFirstChildHorizontalLayout/>
</js:beads>
<js:Label text="Years"/>
<js:Spacer width="6"/>
<js:NumericStepper
id="yearsStepper"
value="15"
minimum="1"
maximum="50"
stepSize="1"/>
</js:Group>
<js:Label text="Payment: {resultText} per month"/>
<js:TextButton text="Calculate Payment"
click="calcuatePaymentButton_onClick(event)"/>
</js:Panel>
</js:View>
</js:initialView>
<fx:Script>
<![CDATA[
[Bindable]
private var resultText:String = "1687.71";
private function calculatePayment(principal:Number, interestRate:Number, years:int):Number
{
var effectiveInterestRate:Number = (interestRate / 100) / 12;
var totalPaymentCount:int = years * 12;
return principal * (effectiveInterestRate / (1 - Math.pow(1 + effectiveInterestRate, -totalPaymentCount)))
}
private function calcuatePaymentButton_onClick(event:MouseEvent):void
{
var principal:Number = this.principalStepper.value;
var interestRate:Number = this.interestStepper.value;
var years:int = this.yearsStepper.value;
var payment:Number = calculatePayment(principal, interestRate, years);
this.resultText = payment.toFixed(2);
}
]]>
</fx:Script>
</js:Application>
{code}
> Layout of NumericStepper is broken
> ----------------------------------
>
> Key: FLEX-35322
> URL: https://issues.apache.org/jira/browse/FLEX-35322
> Project: Apache Flex
> Issue Type: Bug
> Environment: Windows 10
> Chrome 59.0.3071.82
> Firefox: 53.0.3 (32 bits)
> Reporter: Piotr Zarzycki
> Assignee: Peter Ent
> Fix For: Apache FlexJS 0.8.0
>
> Attachments: broken_numeric_stepper_layout.png, Screen Shot 2017-06-07 at 10.47.56 AM.png
>
>
> I just tried NumericStepper creating simple application
> {code}
> <?xml version="1.0" encoding="utf-8"?>
> <js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
> xmlns:js="library://ns.apache.org/flexjs/basic">
>
> <js:valuesImpl>
> <js:SimpleCSSValuesImpl/>
> </js:valuesImpl>
>
> <js:initialView>
> <js:View>
> <js:Group width="150" height="150">
> <js:NumericStepper width="100" height="30" minimum="0" maximum="10" stepSize="1"/>
> </js:Group>
> </js:View>
> </js:initialView>
> </js:Application>
> {code}
> Layout is being broken look into the screenshot-> broken_numeric_stepper_layout.png
--
This message was sent by Atlassian JIRA
(v6.3.15#6346)