[Flex JS] Padding not working as expected

[Justin Mclean <ju...@classsoftware.com>]

Hi,

With this code the margin works but the padding is not being applied.

It this expected or is it a bug?

<?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 width="100" height="100">
           <js:style>
               <js:SimpleCSSStyles padding="20" margin="50" backgroundColor="red" />
           </js:style>
           <js:Label text="Hello" />
       </js:View>
   </js:initialView>
</js:Application>

The box expands to include the padding ie it 140x140 rather than 100x100 but the div around the span containing the text is not positioned correctly. It’s at 0,0 when it should be at 20,20.

Here’s the generated HTML:
<div class="flexjs" style="display: block; position: relative; width: 100px; height: 100px; padding: 20px; margin: 50px; background-color: rgb(255, 0, 0);"><div style="display: block; position: absolute; left: 0px; top: 0px; width: 100px; height: 100px;"><span class="Label" style="white-space: nowrap; cursor: default; pointer-events: none; display: block;">Hello</span></div></div>

Thanks,
Justin

Re: [Flex JS] Padding not working as expected

[ju...@classsoftware.com]

Hi,

Raised https://issues.apache.org/jira/browse/FLEX-35274 for this issue.

Justin

Re: [Flex JS] Padding not working as expected

[ju...@classsoftware.com]

Hi,

> One alternative is to wrap a component in 4 boxes to simulate the padding but that’s going to up your box/nest count really fast even for simple designs.

JFYI another (less heavy handed but still heavy IMO) alternative is to wrap the component that required padding in a single container and set the x and y values to simulate padding. Complications occur were you have % height and widths ie it not going to work as expected.

Thanks,
Justin

Re: [Flex JS] Padding not working as expected

[Peter Ent <pe...@adobe.com>]

I'll try and look into this next.
‹peter

On 2/16/17, 5:40 PM, "Justin Mclean" <ju...@classsoftware.com> wrote:

>Hi,
>
>Anyone have thought on this?
>
>It looks to be a serious bug to me and there¹s no workaround except in
>the simplest cases.
>
>One alternative is to wrap a component in 4 boxes to simulate the padding
>but that¹s going to up your box/nest count really fast even for simple
>designs.
>
>Thanks,
>Justin

Re: [Flex JS] Padding not working as expected

[Justin Mclean <ju...@classsoftware.com>]

Hi,

Anyone have thought on this?

It looks to be a serious bug to me and there’s no workaround except in the simplest cases.

One alternative is to wrap a component in 4 boxes to simulate the padding but that’s going to up your box/nest count really fast even for simple designs.

Thanks,
Justin

Re: [Flex JS] Padding not working as expected

[Justin Mclean <ju...@classsoftware.com>]

Hi,

In this case you can work around the issue like so:

<js:View width="140" height="140">
    <js:style>
        <js:SimpleCSSStyles padding="0" margin="50" backgroundColor="red" />
    </js:style>
    <js:Label text="Hello" x="20" y="20" />
</js:View>

But this work around doesn’t really work when using percentage heights and widths.

In this for example:
<js:initialView>
    <js:View width="140" height="140">
        <js:style>
            <js:SimpleCSSStyles padding="0" margin="50" backgroundColor="red" />
        </js:style>
        <js:HRule x="20" percentWidth="100" />
    </js:View>
</js:initialView>

The horizontal rule is 140 px wide (when it should be only 100 px wide) and goes 20 pixels outside the red box to the right.

This is probably another bug is percentWidth and percentHeight probably shouldn’t include padding? Any thoughts?

Thanks,
Justin

Re: [Flex JS] Padding not working as expected

[yishayw <yi...@hotmail.com>]

Justin Mclean wrote
> Here’s the generated HTML:
> <div class="flexjs" style="display: block; position: relative; width:
> 100px; height: 100px; padding: 20px; margin: 50px; background-color:
> rgb(255, 0, 0);">
> &lt;
> div style=&quot;display: block; &lt;b
> &gt;
> position: absolute
*
> ; left: 0px; top: 0px; width: 100px; height: 100px;">

> Hello

> </div>
> </div>

We just ran into this as well. The problem is that the content view has
absolute positioning (boldfaced).

BTW, the flash version works.




--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/Flex-JS-Padding-not-working-as-expected-tp59515p59704.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.