You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by Carlos Rovira <ca...@apache.org> on 2016/11/03 23:51:11 UTC
[FlexJS] Apply style to component
Hi,
could I have some style in a .css like this:
demo-card-wide.mdl-card {
width: 512px;
}
.demo-card-wide > .mdl-card__title {
color: #fff;
height: 176px;
background: url('../../../../src/main/resources/Unknown.jpeg') center /
cover;
}
.demo-card-wide > .mdl-card__menu {
color: #fff;
}
and apply to a new component based on container component (called "Card")
in this way:
<mdl:Card className="demo-card-wide">
<mdl:CardTitle/>
....
?
1.- I was expecting to see the component 512px wide, but this is not applied
2.- since the generated html is well formed as expected, I expected to see
CSS applying to child nodes as expected.
3.- If I use in a CardTitle a property "style" I get some styles applied :
color: #fff; height: 176px;
but not "background"
3.- using a <js:Image/> I can get the image loaded, but using the
"background" style I can't get the image load, maybe is a matter of paths?
--
Carlos Rovira
http://about.me/carlosrovira
Re: [FlexJS] Apply style to component
Posted by Carlos Rovira <ca...@codeoscopic.com>.
Hi Alex,
to track this problem (at least a first one with inline css styles), I'll
give you a basic use case:
<js:Container style="color: #666;height: 176px; background:
url('../../../../src/main/resources/Unknown.jpeg') center / cover;"/>
this gives following html:
<div style="position: relative; color: rgb(102, 102, 102); height:
176px;"></div>
I think the problem is "background" css style is bypassed by the compiler
and disappears in output
2016-11-04 1:03 GMT+01:00 Alex Harui <ah...@adobe.com>:
> I'd have to really think through this, but at a quick glance, isn't
>
> demo-card-wide.mdl-card
>
>
> an advanced selector that is looking for a className mdl-card inside a
> className demo-card-wide?
>
> Also, I think our default container wraps the children in another div in
> order to manage complex chrome like in Panel, so immediate child selectors
> may not work as expected. It is a to-do to create a flat, chrome less
> Container.
>
> -Alex
>
> On 11/3/16, 4:51 PM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
> <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
>
> >Hi,
> >
> >could I have some style in a .css like this:
> >
> >demo-card-wide.mdl-card {
> > width: 512px;
> >}
> >.demo-card-wide > .mdl-card__title {
> > color: #fff;
> > height: 176px;
> > background: url('../../../../src/main/resources/Unknown.jpeg') center /
> >cover;
> >}
> >.demo-card-wide > .mdl-card__menu {
> > color: #fff;
> >}
> >
> >and apply to a new component based on container component (called "Card")
> >
> >in this way:
> >
> ><mdl:Card className="demo-card-wide">
> > <mdl:CardTitle/>
> > ....
> >
> >?
> >
> >1.- I was expecting to see the component 512px wide, but this is not
> >applied
> >2.- since the generated html is well formed as expected, I expected to see
> >CSS applying to child nodes as expected.
> >3.- If I use in a CardTitle a property "style" I get some styles applied :
> >
> >color: #fff; height: 176px;
> >
> >but not "background"
> >
> >3.- using a <js:Image/> I can get the image loaded, but using the
> >"background" style I can't get the image load, maybe is a matter of paths?
> >
> >--
> >Carlos Rovira
> >http://about.me/carlosrovira
>
>
--
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: [FlexJS] Apply style to component
Posted by Alex Harui <ah...@adobe.com>.
I'd have to really think through this, but at a quick glance, isn't
demo-card-wide.mdl-card
an advanced selector that is looking for a className mdl-card inside a
className demo-card-wide?
Also, I think our default container wraps the children in another div in
order to manage complex chrome like in Panel, so immediate child selectors
may not work as expected. It is a to-do to create a flat, chrome less
Container.
-Alex
On 11/3/16, 4:51 PM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
<carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
>Hi,
>
>could I have some style in a .css like this:
>
>demo-card-wide.mdl-card {
> width: 512px;
>}
>.demo-card-wide > .mdl-card__title {
> color: #fff;
> height: 176px;
> background: url('../../../../src/main/resources/Unknown.jpeg') center /
>cover;
>}
>.demo-card-wide > .mdl-card__menu {
> color: #fff;
>}
>
>and apply to a new component based on container component (called "Card")
>
>in this way:
>
><mdl:Card className="demo-card-wide">
> <mdl:CardTitle/>
> ....
>
>?
>
>1.- I was expecting to see the component 512px wide, but this is not
>applied
>2.- since the generated html is well formed as expected, I expected to see
>CSS applying to child nodes as expected.
>3.- If I use in a CardTitle a property "style" I get some styles applied :
>
>color: #fff; height: 176px;
>
>but not "background"
>
>3.- using a <js:Image/> I can get the image loaded, but using the
>"background" style I can't get the image load, maybe is a matter of paths?
>
>--
>Carlos Rovira
>http://about.me/carlosrovira