You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by Justin Mclean <ju...@classsoftware.com> on 2017/02/16 06:15:45 UTC

[Flex JS] Label's text gets trimmed

Hi,

This:
<js:HContainer>
    <js:Label text=“Hello, ">
        <js:style>
            <js:SimpleCSSStyles fontWeight="bold" />
        </js:style>
    </js:Label>
    <js:Label text=“world">
        <js:style>
            <js:SimpleCSSStyles />
        </js:style>
    </js:Label>
</js:HContainer>

Gives this: (removing the space)
Hello,world

Rather than the expected:
Hello, world

In this case you could of course do something like this (although it's not quite the same):

<js:Label html=“&lt;b&gt;Login&lt;/b&gt;, to access your management tools” />

But there are other cases where this is not so easy to solve and spaces are needed on either side.

Is there any reason text labels are trimmed? Is this a bug?

Thanks,
Justin

Re: [Flex JS] Label's text gets trimmed

Posted by Carlos Rovira <ca...@codeoscopic.com>.
Ok Alex,

one of my plans is to get over basic FlexJS components to style it. That
means to implement theming, as I get to that task, I'll be tweaking that.

Thanks

2017-02-17 16:59 GMT+01:00 Alex Harui <ah...@adobe.com>:

>
>
> On 2/17/17, 12:22 AM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
> <carlos.rovira@gmail.com on behalf of carlos.rovira@codeoscopic.com>
> wrote:
>
> >Aside from the problem begin discussed, I continue thinking that generated
> >code should not have the verbose hardcoded styles that is shown and should
> >be created as CSS. I think for various reasons.
> >
> >1.- I don't like CSS hardcoded in control/view component in source code
> >2.- that would make people unable to remove that code, and some people
> >would want to do it.
> >3.- the typical "separation of concerns" apply here perfectly
> >
> >It's only me? or nobody thinks that our output should not be so verbose?
> >
> >My bet would be to create some CSS styles that unifies that and apply it
> >on
> >class selectors.
> >Since js:Button or js:Container has a typedef of "Button" or "Container"
> >classes respectively in css
> >we can insert all this css styles in that rule.
> >
> >People nos wanting that styles can exclude default css with the compiler
> >option.
> >
>
> +1 for moving more things to the Type selectors.  However, we still fiddle
> with style at runtime for visible and layout.
>
> -Alex
>
>


-- 

Carlos Rovira
Director General
M: +34 607 22 60 05
http://www.codeoscopic.com
http://www.avant2.es

Este mensaje se dirige exclusivamente a su destinatario y puede contener
información privilegiada o confidencial. Si ha recibido este mensaje por
error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
proceda a su destrucción.

De la vigente Ley Orgánica de Protección de Datos (15/1999), le comunicamos
que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
S.A. La finalidad de dicho tratamiento es facilitar la prestación del
servicio o información solicitados, teniendo usted derecho de acceso,
rectificación, cancelación y oposición de sus datos dirigiéndose a nuestras
oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
necesaria.

Re: [Flex JS] Label's text gets trimmed

Posted by Alex Harui <ah...@adobe.com>.

On 2/17/17, 12:22 AM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
<carlos.rovira@gmail.com on behalf of carlos.rovira@codeoscopic.com> wrote:

>Aside from the problem begin discussed, I continue thinking that generated
>code should not have the verbose hardcoded styles that is shown and should
>be created as CSS. I think for various reasons.
>
>1.- I don't like CSS hardcoded in control/view component in source code
>2.- that would make people unable to remove that code, and some people
>would want to do it.
>3.- the typical "separation of concerns" apply here perfectly
>
>It's only me? or nobody thinks that our output should not be so verbose?
>
>My bet would be to create some CSS styles that unifies that and apply it
>on
>class selectors.
>Since js:Button or js:Container has a typedef of "Button" or "Container"
>classes respectively in css
>we can insert all this css styles in that rule.
>
>People nos wanting that styles can exclude default css with the compiler
>option.
>

+1 for moving more things to the Type selectors.  However, we still fiddle
with style at runtime for visible and layout.

-Alex

Re: [Flex JS] Label's text gets trimmed

Posted by Carlos Rovira <ca...@codeoscopic.com>.
Aside from the problem begin discussed, I continue thinking that generated
code should not have the verbose hardcoded styles that is shown and should
be created as CSS. I think for various reasons.

1.- I don't like CSS hardcoded in control/view component in source code
2.- that would make people unable to remove that code, and some people
would want to do it.
3.- the typical "separation of concerns" apply here perfectly

It's only me? or nobody thinks that our output should not be so verbose?

My bet would be to create some CSS styles that unifies that and apply it on
class selectors.
Since js:Button or js:Container has a typedef of "Button" or "Container"
classes respectively in css
we can insert all this css styles in that rule.

People nos wanting that styles can exclude default css with the compiler
option.







2017-02-16 23:11 GMT+01:00 Justin Mclean <ju...@classsoftware.com>:

> Hi,
>
> > I think this is the normal way HTML works
>
> No sure about that as if you do this:
> <span>Hi </span><span>there</span>
>
> The space is displayed.
>
> The generated HTML does include the space however so it does look like a
> HTML issue:
> <span class="Label" style="white-space: nowrap; cursor: default;
> pointer-events: none; font-weight: bold; display: inline-block;">Hello,
> </span>
> <span class="Label" style="white-space: nowrap; cursor: default;
> pointer-events: none; display: inline-block;">world</span>
>
> Thanks,
> Justin




-- 

Carlos Rovira
Director General
M: +34 607 22 60 05
http://www.codeoscopic.com
http://www.avant2.es

Este mensaje se dirige exclusivamente a su destinatario y puede contener
información privilegiada o confidencial. Si ha recibido este mensaje por
error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
proceda a su destrucción.

De la vigente Ley Orgánica de Protección de Datos (15/1999), le comunicamos
que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
S.A. La finalidad de dicho tratamiento es facilitar la prestación del
servicio o información solicitados, teniendo usted derecho de acceso,
rectificación, cancelación y oposición de sus datos dirigiéndose a nuestras
oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
necesaria.

Re: [Flex JS] Label's text gets trimmed

Posted by Justin Mclean <ju...@classsoftware.com>.
Hi,

> I think this is the normal way HTML works

No sure about that as if you do this:
<span>Hi </span><span>there</span>

The space is displayed.

The generated HTML does include the space however so it does look like a HTML issue:
<span class="Label" style="white-space: nowrap; cursor: default; pointer-events: none; font-weight: bold; display: inline-block;">Hello, </span>
<span class="Label" style="white-space: nowrap; cursor: default; pointer-events: none; display: inline-block;">world</span>

Thanks,
Justin

Re: [Flex JS] Label's text gets trimmed

Posted by OmPrakash Muppirala <bi...@gmail.com>.
Setting this style in CSS should fix this issue:

white-space: pre
or
white-space: pre-wrap

More options here: https://www.w3schools.com/cssref/pr_text_white-space.asp

Thanks,
Om

2017-02-16 10:39 GMT-08:00 Carlos Rovira <ca...@codeoscopic.com>:

> Hi Justing, I think this is the normal way HTML works.
> HTML removes whitespaces. If you put lots of whitespace, HTML will remove
> them.
> So I think no much to do there for this kind of trys
>
> 2017-02-16 7:15 GMT+01:00 Justin Mclean <ju...@classsoftware.com>:
>
> > Hi,
> >
> > This:
> > <js:HContainer>
> >     <js:Label text=“Hello, ">
> >         <js:style>
> >             <js:SimpleCSSStyles fontWeight="bold" />
> >         </js:style>
> >     </js:Label>
> >     <js:Label text=“world">
> >         <js:style>
> >             <js:SimpleCSSStyles />
> >         </js:style>
> >     </js:Label>
> > </js:HContainer>
> >
> > Gives this: (removing the space)
> > Hello,world
> >
> > Rather than the expected:
> > Hello, world
> >
> > In this case you could of course do something like this (although it's
> not
> > quite the same):
> >
> > <js:Label html=“&lt;b&gt;Login&lt;/b&gt;, to access your management
> > tools” />
> >
> > But there are other cases where this is not so easy to solve and spaces
> > are needed on either side.
> >
> > Is there any reason text labels are trimmed? Is this a bug?
> >
> > Thanks,
> > Justin
>
>
>
>
> --
>
> Carlos Rovira
> Director General
> M: +34 607 22 60 05
> http://www.codeoscopic.com
> http://www.avant2.es
>
> Este mensaje se dirige exclusivamente a su destinatario y puede contener
> información privilegiada o confidencial. Si ha recibido este mensaje por
> error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
> proceda a su destrucción.
>
> De la vigente Ley Orgánica de Protección de Datos (15/1999), le comunicamos
> que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
> S.A. La finalidad de dicho tratamiento es facilitar la prestación del
> servicio o información solicitados, teniendo usted derecho de acceso,
> rectificación, cancelación y oposición de sus datos dirigiéndose a nuestras
> oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
> necesaria.
>

Re: [Flex JS] Label's text gets trimmed

Posted by Carlos Rovira <ca...@codeoscopic.com>.
Hi Justing, I think this is the normal way HTML works.
HTML removes whitespaces. If you put lots of whitespace, HTML will remove
them.
So I think no much to do there for this kind of trys

2017-02-16 7:15 GMT+01:00 Justin Mclean <ju...@classsoftware.com>:

> Hi,
>
> This:
> <js:HContainer>
>     <js:Label text=“Hello, ">
>         <js:style>
>             <js:SimpleCSSStyles fontWeight="bold" />
>         </js:style>
>     </js:Label>
>     <js:Label text=“world">
>         <js:style>
>             <js:SimpleCSSStyles />
>         </js:style>
>     </js:Label>
> </js:HContainer>
>
> Gives this: (removing the space)
> Hello,world
>
> Rather than the expected:
> Hello, world
>
> In this case you could of course do something like this (although it's not
> quite the same):
>
> <js:Label html=“&lt;b&gt;Login&lt;/b&gt;, to access your management
> tools” />
>
> But there are other cases where this is not so easy to solve and spaces
> are needed on either side.
>
> Is there any reason text labels are trimmed? Is this a bug?
>
> Thanks,
> Justin




-- 

Carlos Rovira
Director General
M: +34 607 22 60 05
http://www.codeoscopic.com
http://www.avant2.es

Este mensaje se dirige exclusivamente a su destinatario y puede contener
información privilegiada o confidencial. Si ha recibido este mensaje por
error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
proceda a su destrucción.

De la vigente Ley Orgánica de Protección de Datos (15/1999), le comunicamos
que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
S.A. La finalidad de dicho tratamiento es facilitar la prestación del
servicio o información solicitados, teniendo usted derecho de acceso,
rectificación, cancelación y oposición de sus datos dirigiéndose a nuestras
oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
necesaria.