You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by yishayw <yi...@hotmail.com> on 2017/02/15 08:46:13 UTC
[FlexJS, MDL] Layout Problems
Carols, Piotrz, if you have time to have a look at this [1] it would be
helpful. We spent some time trying to figure this out, but ended up just
overriding some css attributes with !important, which doesn't seem robust.
[1] https://issues.apache.org/jira/browse/FLEX-35266
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Layout-Problems-tp59423.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS, MDL] Layout Problems
Posted by Harbs <ha...@gmail.com>.
You need a wrapper around the input to set the size as documented on the mdl site. They recommend using <p>, but that introduces a bottom padding. That’s why I used div instead.
> On Feb 22, 2017, at 5:12 PM, Carlos Rovira <ca...@codeoscopic.com> wrote:
>
> Hi Harbs,
>
> the first div is not in the slider spec, could we get rid of it? if not
> we'll be introducing output that is not conforming to MDL spec.
>
> I look at the changes in typeNames and you should check as well that you
> are able to add additional class selectors to the Slider, since my
> implementation was done in that way to ensure that. I didn't test your
> changes, but I think you can find a problem trying to add new selectors:
>
> <mdl:Slider className="some-class-selector"/>
>
> some-class-selector could remove the slider ones since are not in
> typeNames. If this is not happening that would be very good by I'm afraid
> that this could be a problem.
>
> thanks!
>
>
>
> 2017-02-22 13:30 GMT+01:00 Harbs <ha...@gmail.com>:
>
>> This is the current HTML markup including the FlexJS positioner (with the
>> size set to 100%):
>>
>> <div class="" style="width: 100%;"><div class="mdl-slider__container"><input
>> type="range" class="mdl-slider mdl-js-slider is-lowest-value is-upgraded"
>> id="strokeWeightSlider" step="1" min="0" max="30" data-upgraded=",MaterialSlider"><div
>> class="mdl-slider__background-flex"><div class="mdl-slider__background-lower"
>> style="flex: 0 1 0%;"></div><div class="mdl-slider__background-upper"
>> style="flex: 1 1 0%;"></div></div></div></div>
>>
>> Do you have a reference to the JIRA re. clac?
>>
>>> On Feb 22, 2017, at 2:13 PM, Carlos Rovira <
>> carlos.rovira@codeoscopic.com> wrote:
>>>
>>> Hi Harbs,
>>>
>>> for "calc", Alex fixed the ticket for calc that Om create some time ago.
>> If
>>> is failing, you should open it again.
>>>
>>> regarding slider, is great you remove the hardcoded size, I think I
>> forgot
>>> to do that in my revision and clean.
>>> The only think I 'd ask you if to check that the actual output of the
>>> component is the same as MDL deserves :
>>>
>>> https://getmdl.io/components/index.html#sliders-section
>>>
>>> code for a slide extracted should be like this:
>>>
>>> <div class="mdl-slider__container"><input class="mdl-slider
>> mdl-js-slider
>>> is-lowest-value is-upgraded" type="range" min="0" max="100" value="0"
>>> tabindex="0" data-upgraded=",MaterialSlider"><div
>>> class="mdl-slider__background-flex"><div
>>> class="mdl-slider__background-lower" style="flex: 0 1 0px;"></div><div
>>> class="mdl-slider__background-upper" style="flex: 1 1
>>> 0px;"></div></div></div>
>>>
>>> Thanks for updating it! :)
>>>
>>>
>>> 2017-02-22 12:36 GMT+01:00 Harbs <ha...@gmail.com>:
>>>
>>>> I committed a change today which fixes the double container problem.
>>>>
>>>> It took me quite some time to figure out how to fix the CSS.
>>>>
>>>> To fix the CSS so the slider is full width, you need to do this:
>>>> .mdl-slider
>>>> {
>>>> margin: 0px;
>>>> width: 100%;
>>>> }
>>>>
>>>> .mdl-slider__background-flex
>>>> {
>>>> margin: 0px;
>>>> width: calc(100% - 12px);
>>>> }
>>>>
>>>> The background-flex needs to be 12px less than the margin
>>>>
>>>> If you want a 10px margin, the css should be like this:
>>>>
>>>> .mdl-slider
>>>> {
>>>> margin: 10px;
>>>> width: calc(100% - 10px);
>>>> }
>>>>
>>>> .mdl-slider__background-flex
>>>> {
>>>> margin: 10px;
>>>> width: calc(100% - 22px);
>>>> }
>>>>
>>>> Unfortunately, FalconJX does not like calc() in CSS. When trying to
>>>> compile with CSS that looks like that, I get the following error:
>>>>
>>>> Internal error in ABC generator subsystem, when generating code for: [my
>>>> app]: java.lang.NullPointerException
>>>> at org.apache.flex.abc.instructionlist.InstructionList.addAll(
>>>> InstructionList.java:420)
>>>> at org.apache.flex.compiler.internal.as.codegen.
>>>> MXMLClassDirectiveProcessor.processMXMLStyle(
>> MXMLClassDirectiveProcessor.
>>>> java:4277)
>>>> at org.apache.flex.compiler.internal.as.codegen.
>>>> MXMLClassDirectiveProcessor.processNode(MXMLClassDirectiveProcessor.
>>>> java:987)
>>>> at org.apache.flex.compiler.internal.as.codegen.
>>>> MXMLClassDirectiveProcessor.traverse(MXMLClassDirectiveProcessor.
>> java:861)
>>>> at org.apache.flex.compiler.internal.as.codegen.
>>>> MXMLClassDirectiveProcessor.traverse(MXMLClassDirectiveProcessor.
>> java:831)
>>>> at org.apache.flex.compiler.internal.as.codegen.
>>>> MXMLClassDirectiveProcessor.processMainClassDefinitionNode
>>>> (MXMLClassDirectiveProcessor.java:653)
>>>> at org.apache.flex.compiler.internal.as.codegen.
>>>> GlobalDirectiveProcessor.declareMXMLDocument(
>>>> GlobalDirectiveProcessor.java:518)
>>>> at org.apache.flex.compiler.internal.as.codegen.
>>>> DirectiveProcessor.processNode(DirectiveProcessor.java:232)
>>>> at org.apache.flex.compiler.internal.as.codegen.
>>>> DirectiveProcessor.traverse(DirectiveProcessor.java:188)
>>>> at org.apache.flex.compiler.internal.as.codegen.
>>>> ABCGenerator.generate(ABCGenerator.java:122)
>>>> at org.apache.flex.compiler.internal.units.MXMLCompilationUnit.
>>>> handleABCBytesRequest(MXMLCompilationUnit.java:199)
>>>> at org.apache.flex.compiler.internal.units.CompilationUnitBase.
>>>> processABCBytesRequest(CompilationUnitBase.java:873)
>>>> at org.apache.flex.compiler.internal.units.
>>>> CompilationUnitBase.access$300(CompilationUnitBase.java:108)
>>>> at org.apache.flex.compiler.internal.units.
>>>> CompilationUnitBase$4$1.call(CompilationUnitBase.java:310)
>>>> at org.apache.flex.compiler.internal.units.
>>>> CompilationUnitBase$4$1.call(CompilationUnitBase.java:306)
>>>> at org.apache.flex.compiler.internal.units.requests.
>>>> RequestMaker$1.call(RequestMaker.java:228)
>>>> at org.apache.flex.compiler.internal.units.requests.
>>>> RequestMaker$1.call(RequestMaker.java:222)
>>>> at java.util.concurrent.FutureTask.run(FutureTask.java:266)
>>>> at java.util.concurrent.ThreadPoolExecutor.runWorker(
>>>> ThreadPoolExecutor.java:1142)
>>>> at java.util.concurrent.ThreadPoolExecutor$Worker.run(
>>>> ThreadPoolExecutor.java:617)
>>>> at java.lang.Thread.run(Thread.java:745)
>>>>
>>>> I also made two changes to slider which I just committed:
>>>> 1. I removed the hard-coded width. There should not be a width hard
>> coded
>>>> into the slider. If anything, it should be added to the default css,
>> but I
>>>> don’t really see a need to have a default value.
>>>> 2. I changed the wrapper from p to div. MDL applies a 16px bottom
>> padding
>>>> to p elements. I don’t see why we want to force the bottom padding to a
>>>> slider.
>>>>
>>>>> On Feb 16, 2017, at 11:50 AM, Harbs <ha...@gmail.com> wrote:
>>>>>
>>>>> To sum up the problems:
>>>>>
>>>>> 1. mdl applies a 20 px margin (I think it’s 30px for “flex” sliders)
>>>>> 2. This margin gets applied TWICE in FlexJS mdl. Once for the p
>> element,
>>>> and then again for the input element. This adds up to a 40px margin.
>>>>> 3. The slider gets wrapped in a mdl-slider__container element. This is
>>>> done by the mdl js code. Because there are two mdl-slider elements,
>> there
>>>> are two containers created instead of one.
>>>>> 4. The outer container (which should not exist) pushes the slider down.
>>>>>
>>>>> Problems 2,3 and 4 can be solved by only applying the classes to the
>>>> input and not the p element.
>>>>>
>>>>> Problem #1 seems to be by design for mdl, but can be overridden in css.
>>>> I don’t think that should be done by the FlexJS mdl library. If the
>> client
>>>> wants to remove the margin, it should be done by them.
>>>>>
>>>>> My $0.02.
>>>>> Harbs
>>>>>
>>>>>> On Feb 16, 2017, at 11:12 AM, OK <po...@olafkrueger.net> wrote:
>>>>>>
>>>>>>> Can you exact specify what is the class of this container?
>>>>>>
>>>>>> There's a div that applies the class "mdl-slider__container" which
>> sets
>>>> the
>>>>>> height to 18px [1].
>>>>>> After removing this the vertical gap goes away.
>>>>>>
>>>>>> The horizontal gap comes as Harbs said from MDL itself, this is not
>>>> nice
>>>>>> but not a FlexJS issue.
>>>>>>
>>>>>> Olaf
>>>>>>
>>>>>> [1] https://snag.gy/x0gfpW.jpg
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> --
>>>>>> View this message in context: http://apache-flex-
>>>> development.2333347.n4.nabble.com/FlexJS-MDL-Layout-
>>>> Problems-tp59423p59531.html
>>>>>> Sent from the Apache Flex Development mailing list archive at
>>>> Nabble.com.
>>>>>
>>>>
>>>>
>>>
>>>
>>> --
>>>
>>> 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.
>>
>>
>
>
> --
>
> 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, MDL] Layout Problems
Posted by Harbs <ha...@gmail.com>.
I’m pretty sure this is not a problem, but I’ll double-check.
> On Feb 22, 2017, at 5:12 PM, Carlos Rovira <ca...@codeoscopic.com> wrote:
>
> some-class-selector could remove the slider ones since are not in
> typeNames. If this is not happening that would be very good by I'm afraid
> that this could be a problem.
Re: [FlexJS, MDL] Layout Problems
Posted by Alex Harui <ah...@adobe.com>.
On 2/27/17, 7:59 AM, "Harbs" <ha...@gmail.com> wrote:
>OK.
>
>What about @media for JS?
>
>Would that prevent SWF code from consuming it?
I doubt it, but you can try it.
>
>I do think it’s important to allow specifying any valid css in your MXML
>file even if it will not compile to SWF. One of the advantages of FlexJS
>over “normal” js dev is the ability to have self-contained markup, code
>and css.
No disagreement there. It is just a matter of time and resources.
Anything with a reasonable workaround is getting pushed to the end of my
list right now.
-Alex
>
>> On Feb 27, 2017, at 5:18 PM, Alex Harui <ah...@adobe.com> wrote:
>>
>>
>>
>>As a workaround, you have the option of using a custom HTML template and
>> bringing the CSS with calc() that way.
>>
>> HTH,
>> -Alex
>>
>
Re: [FlexJS, MDL] Layout Problems
Posted by Harbs <ha...@gmail.com>.
OK.
What about @media for JS?
Would that prevent SWF code from consuming it?
I do think it’s important to allow specifying any valid css in your MXML file even if it will not compile to SWF. One of the advantages of FlexJS over “normal” js dev is the ability to have self-contained markup, code and css.
> On Feb 27, 2017, at 5:18 PM, Alex Harui <ah...@adobe.com> wrote:
>
>
>
> On 2/27/17, 3:30 AM, "Harbs" <ha...@gmail.com> wrote:
>
>> I don’t need it for SWF. I just want to be able to include valid css in
>> my app and not have Falcon choke on it.
>>
>> I’m not sure I understand why this is related to SimpleCSSValuesImpl. The
>> calc() should simply be passed through to the css file.
>>
>> Unless you are talking about FlexJS doing something fancy with advanced
>> css features...
>
> If you set the width to 100px, SWF code will respond. If you set it to
> calc(100% - 12px), SWF code will throw up.
>
> As a workaround, you have the option of using a custom HTML template and
> bringing the CSS with calc() that way.
>
> HTH,
> -Alex
>
Re: [FlexJS, MDL] Layout Problems
Posted by Alex Harui <ah...@adobe.com>.
On 2/27/17, 3:30 AM, "Harbs" <ha...@gmail.com> wrote:
>I don’t need it for SWF. I just want to be able to include valid css in
>my app and not have Falcon choke on it.
>
>I’m not sure I understand why this is related to SimpleCSSValuesImpl. The
>calc() should simply be passed through to the css file.
>
>Unless you are talking about FlexJS doing something fancy with advanced
>css features...
If you set the width to 100px, SWF code will respond. If you set it to
calc(100% - 12px), SWF code will throw up.
As a workaround, you have the option of using a custom HTML template and
bringing the CSS with calc() that way.
HTH,
-Alex
Re: [FlexJS, MDL] Layout Problems
Posted by Harbs <ha...@gmail.com>.
I don’t need it for SWF. I just want to be able to include valid css in my app and not have Falcon choke on it.
I’m not sure I understand why this is related to SimpleCSSValuesImpl. The calc() should simply be passed through to the css file.
Unless you are talking about FlexJS doing something fancy with advanced css features...
> On Feb 27, 2017, at 12:20 PM, Alex Harui <ah...@adobe.com> wrote:
>
> When I fixed this earlier, it was just for the folks who were not using
> the SWF output. I think recent changes have broken it even for JS output,
> but I'm wondering if you are expecting this to work for SWF. If so there
> is a lot more work to be done. IMO, SimpleCSSValuesImpl shouldn't have to
> support calc(). We'd need to build out a NotSoSimpleCSSValuesImpl.
>
> Thoughts?
> -Alex
>
> On 2/26/17, 12:10 AM, "Harbs" <ha...@gmail.com> wrote:
>
>> Can someone please look at this? It’s important.
>>
>> Thanks,
>> Harbs
>>
>>> On Feb 22, 2017, at 3:14 PM, Harbs <ha...@gmail.com> wrote:
>>>
>>> Found it:
>>> https://issues.apache.org/jira/browse/FLEX-35235
>>> <https://issues.apache.org/jira/browse/FLEX-35235>
>>>
>>> I just reopened the issue.
>>>
>>>> On Feb 22, 2017, at 2:30 PM, Harbs <harbs.lists@gmail.com
>>>> <ma...@gmail.com>> wrote:
>>>>
>>>> Do you have a reference to the JIRA re. clac?
>>>
>>
>
Re: [FlexJS, MDL] Layout Problems
Posted by Alex Harui <ah...@adobe.com>.
When I fixed this earlier, it was just for the folks who were not using
the SWF output. I think recent changes have broken it even for JS output,
but I'm wondering if you are expecting this to work for SWF. If so there
is a lot more work to be done. IMO, SimpleCSSValuesImpl shouldn't have to
support calc(). We'd need to build out a NotSoSimpleCSSValuesImpl.
Thoughts?
-Alex
On 2/26/17, 12:10 AM, "Harbs" <ha...@gmail.com> wrote:
>Can someone please look at this? It’s important.
>
>Thanks,
>Harbs
>
>> On Feb 22, 2017, at 3:14 PM, Harbs <ha...@gmail.com> wrote:
>>
>> Found it:
>> https://issues.apache.org/jira/browse/FLEX-35235
>><https://issues.apache.org/jira/browse/FLEX-35235>
>>
>> I just reopened the issue.
>>
>>> On Feb 22, 2017, at 2:30 PM, Harbs <harbs.lists@gmail.com
>>><ma...@gmail.com>> wrote:
>>>
>>> Do you have a reference to the JIRA re. clac?
>>
>
Re: [FlexJS, MDL] Layout Problems
Posted by Harbs <ha...@gmail.com>.
Can someone please look at this? It’s important.
Thanks,
Harbs
> On Feb 22, 2017, at 3:14 PM, Harbs <ha...@gmail.com> wrote:
>
> Found it:
> https://issues.apache.org/jira/browse/FLEX-35235 <https://issues.apache.org/jira/browse/FLEX-35235>
>
> I just reopened the issue.
>
>> On Feb 22, 2017, at 2:30 PM, Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>
>> Do you have a reference to the JIRA re. clac?
>
Re: [FlexJS, MDL] Layout Problems
Posted by Harbs <ha...@gmail.com>.
Found it:
https://issues.apache.org/jira/browse/FLEX-35235
I just reopened the issue.
> On Feb 22, 2017, at 2:30 PM, Harbs <ha...@gmail.com> wrote:
>
> Do you have a reference to the JIRA re. clac?
Re: [FlexJS, MDL] Layout Problems
Posted by Carlos Rovira <ca...@codeoscopic.com>.
Hi Harbs,
the first div is not in the slider spec, could we get rid of it? if not
we'll be introducing output that is not conforming to MDL spec.
I look at the changes in typeNames and you should check as well that you
are able to add additional class selectors to the Slider, since my
implementation was done in that way to ensure that. I didn't test your
changes, but I think you can find a problem trying to add new selectors:
<mdl:Slider className="some-class-selector"/>
some-class-selector could remove the slider ones since are not in
typeNames. If this is not happening that would be very good by I'm afraid
that this could be a problem.
thanks!
2017-02-22 13:30 GMT+01:00 Harbs <ha...@gmail.com>:
> This is the current HTML markup including the FlexJS positioner (with the
> size set to 100%):
>
> <div class="" style="width: 100%;"><div class="mdl-slider__container"><input
> type="range" class="mdl-slider mdl-js-slider is-lowest-value is-upgraded"
> id="strokeWeightSlider" step="1" min="0" max="30" data-upgraded=",MaterialSlider"><div
> class="mdl-slider__background-flex"><div class="mdl-slider__background-lower"
> style="flex: 0 1 0%;"></div><div class="mdl-slider__background-upper"
> style="flex: 1 1 0%;"></div></div></div></div>
>
> Do you have a reference to the JIRA re. clac?
>
> > On Feb 22, 2017, at 2:13 PM, Carlos Rovira <
> carlos.rovira@codeoscopic.com> wrote:
> >
> > Hi Harbs,
> >
> > for "calc", Alex fixed the ticket for calc that Om create some time ago.
> If
> > is failing, you should open it again.
> >
> > regarding slider, is great you remove the hardcoded size, I think I
> forgot
> > to do that in my revision and clean.
> > The only think I 'd ask you if to check that the actual output of the
> > component is the same as MDL deserves :
> >
> > https://getmdl.io/components/index.html#sliders-section
> >
> > code for a slide extracted should be like this:
> >
> > <div class="mdl-slider__container"><input class="mdl-slider
> mdl-js-slider
> > is-lowest-value is-upgraded" type="range" min="0" max="100" value="0"
> > tabindex="0" data-upgraded=",MaterialSlider"><div
> > class="mdl-slider__background-flex"><div
> > class="mdl-slider__background-lower" style="flex: 0 1 0px;"></div><div
> > class="mdl-slider__background-upper" style="flex: 1 1
> > 0px;"></div></div></div>
> >
> > Thanks for updating it! :)
> >
> >
> > 2017-02-22 12:36 GMT+01:00 Harbs <ha...@gmail.com>:
> >
> >> I committed a change today which fixes the double container problem.
> >>
> >> It took me quite some time to figure out how to fix the CSS.
> >>
> >> To fix the CSS so the slider is full width, you need to do this:
> >> .mdl-slider
> >> {
> >> margin: 0px;
> >> width: 100%;
> >> }
> >>
> >> .mdl-slider__background-flex
> >> {
> >> margin: 0px;
> >> width: calc(100% - 12px);
> >> }
> >>
> >> The background-flex needs to be 12px less than the margin
> >>
> >> If you want a 10px margin, the css should be like this:
> >>
> >> .mdl-slider
> >> {
> >> margin: 10px;
> >> width: calc(100% - 10px);
> >> }
> >>
> >> .mdl-slider__background-flex
> >> {
> >> margin: 10px;
> >> width: calc(100% - 22px);
> >> }
> >>
> >> Unfortunately, FalconJX does not like calc() in CSS. When trying to
> >> compile with CSS that looks like that, I get the following error:
> >>
> >> Internal error in ABC generator subsystem, when generating code for: [my
> >> app]: java.lang.NullPointerException
> >> at org.apache.flex.abc.instructionlist.InstructionList.addAll(
> >> InstructionList.java:420)
> >> at org.apache.flex.compiler.internal.as.codegen.
> >> MXMLClassDirectiveProcessor.processMXMLStyle(
> MXMLClassDirectiveProcessor.
> >> java:4277)
> >> at org.apache.flex.compiler.internal.as.codegen.
> >> MXMLClassDirectiveProcessor.processNode(MXMLClassDirectiveProcessor.
> >> java:987)
> >> at org.apache.flex.compiler.internal.as.codegen.
> >> MXMLClassDirectiveProcessor.traverse(MXMLClassDirectiveProcessor.
> java:861)
> >> at org.apache.flex.compiler.internal.as.codegen.
> >> MXMLClassDirectiveProcessor.traverse(MXMLClassDirectiveProcessor.
> java:831)
> >> at org.apache.flex.compiler.internal.as.codegen.
> >> MXMLClassDirectiveProcessor.processMainClassDefinitionNode
> >> (MXMLClassDirectiveProcessor.java:653)
> >> at org.apache.flex.compiler.internal.as.codegen.
> >> GlobalDirectiveProcessor.declareMXMLDocument(
> >> GlobalDirectiveProcessor.java:518)
> >> at org.apache.flex.compiler.internal.as.codegen.
> >> DirectiveProcessor.processNode(DirectiveProcessor.java:232)
> >> at org.apache.flex.compiler.internal.as.codegen.
> >> DirectiveProcessor.traverse(DirectiveProcessor.java:188)
> >> at org.apache.flex.compiler.internal.as.codegen.
> >> ABCGenerator.generate(ABCGenerator.java:122)
> >> at org.apache.flex.compiler.internal.units.MXMLCompilationUnit.
> >> handleABCBytesRequest(MXMLCompilationUnit.java:199)
> >> at org.apache.flex.compiler.internal.units.CompilationUnitBase.
> >> processABCBytesRequest(CompilationUnitBase.java:873)
> >> at org.apache.flex.compiler.internal.units.
> >> CompilationUnitBase.access$300(CompilationUnitBase.java:108)
> >> at org.apache.flex.compiler.internal.units.
> >> CompilationUnitBase$4$1.call(CompilationUnitBase.java:310)
> >> at org.apache.flex.compiler.internal.units.
> >> CompilationUnitBase$4$1.call(CompilationUnitBase.java:306)
> >> at org.apache.flex.compiler.internal.units.requests.
> >> RequestMaker$1.call(RequestMaker.java:228)
> >> at org.apache.flex.compiler.internal.units.requests.
> >> RequestMaker$1.call(RequestMaker.java:222)
> >> at java.util.concurrent.FutureTask.run(FutureTask.java:266)
> >> at java.util.concurrent.ThreadPoolExecutor.runWorker(
> >> ThreadPoolExecutor.java:1142)
> >> at java.util.concurrent.ThreadPoolExecutor$Worker.run(
> >> ThreadPoolExecutor.java:617)
> >> at java.lang.Thread.run(Thread.java:745)
> >>
> >> I also made two changes to slider which I just committed:
> >> 1. I removed the hard-coded width. There should not be a width hard
> coded
> >> into the slider. If anything, it should be added to the default css,
> but I
> >> don’t really see a need to have a default value.
> >> 2. I changed the wrapper from p to div. MDL applies a 16px bottom
> padding
> >> to p elements. I don’t see why we want to force the bottom padding to a
> >> slider.
> >>
> >>> On Feb 16, 2017, at 11:50 AM, Harbs <ha...@gmail.com> wrote:
> >>>
> >>> To sum up the problems:
> >>>
> >>> 1. mdl applies a 20 px margin (I think it’s 30px for “flex” sliders)
> >>> 2. This margin gets applied TWICE in FlexJS mdl. Once for the p
> element,
> >> and then again for the input element. This adds up to a 40px margin.
> >>> 3. The slider gets wrapped in a mdl-slider__container element. This is
> >> done by the mdl js code. Because there are two mdl-slider elements,
> there
> >> are two containers created instead of one.
> >>> 4. The outer container (which should not exist) pushes the slider down.
> >>>
> >>> Problems 2,3 and 4 can be solved by only applying the classes to the
> >> input and not the p element.
> >>>
> >>> Problem #1 seems to be by design for mdl, but can be overridden in css.
> >> I don’t think that should be done by the FlexJS mdl library. If the
> client
> >> wants to remove the margin, it should be done by them.
> >>>
> >>> My $0.02.
> >>> Harbs
> >>>
> >>>> On Feb 16, 2017, at 11:12 AM, OK <po...@olafkrueger.net> wrote:
> >>>>
> >>>>> Can you exact specify what is the class of this container?
> >>>>
> >>>> There's a div that applies the class "mdl-slider__container" which
> sets
> >> the
> >>>> height to 18px [1].
> >>>> After removing this the vertical gap goes away.
> >>>>
> >>>> The horizontal gap comes as Harbs said from MDL itself, this is not
> >> nice
> >>>> but not a FlexJS issue.
> >>>>
> >>>> Olaf
> >>>>
> >>>> [1] https://snag.gy/x0gfpW.jpg
> >>>>
> >>>>
> >>>>
> >>>>
> >>>>
> >>>>
> >>>>
> >>>> --
> >>>> View this message in context: http://apache-flex-
> >> development.2333347.n4.nabble.com/FlexJS-MDL-Layout-
> >> Problems-tp59423p59531.html
> >>>> Sent from the Apache Flex Development mailing list archive at
> >> Nabble.com.
> >>>
> >>
> >>
> >
> >
> > --
> >
> > 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.
>
>
--
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, MDL] Layout Problems
Posted by Harbs <ha...@gmail.com>.
This is the current HTML markup including the FlexJS positioner (with the size set to 100%):
<div class="" style="width: 100%;"><div class="mdl-slider__container"><input type="range" class="mdl-slider mdl-js-slider is-lowest-value is-upgraded" id="strokeWeightSlider" step="1" min="0" max="30" data-upgraded=",MaterialSlider"><div class="mdl-slider__background-flex"><div class="mdl-slider__background-lower" style="flex: 0 1 0%;"></div><div class="mdl-slider__background-upper" style="flex: 1 1 0%;"></div></div></div></div>
Do you have a reference to the JIRA re. clac?
> On Feb 22, 2017, at 2:13 PM, Carlos Rovira <ca...@codeoscopic.com> wrote:
>
> Hi Harbs,
>
> for "calc", Alex fixed the ticket for calc that Om create some time ago. If
> is failing, you should open it again.
>
> regarding slider, is great you remove the hardcoded size, I think I forgot
> to do that in my revision and clean.
> The only think I 'd ask you if to check that the actual output of the
> component is the same as MDL deserves :
>
> https://getmdl.io/components/index.html#sliders-section
>
> code for a slide extracted should be like this:
>
> <div class="mdl-slider__container"><input class="mdl-slider mdl-js-slider
> is-lowest-value is-upgraded" type="range" min="0" max="100" value="0"
> tabindex="0" data-upgraded=",MaterialSlider"><div
> class="mdl-slider__background-flex"><div
> class="mdl-slider__background-lower" style="flex: 0 1 0px;"></div><div
> class="mdl-slider__background-upper" style="flex: 1 1
> 0px;"></div></div></div>
>
> Thanks for updating it! :)
>
>
> 2017-02-22 12:36 GMT+01:00 Harbs <ha...@gmail.com>:
>
>> I committed a change today which fixes the double container problem.
>>
>> It took me quite some time to figure out how to fix the CSS.
>>
>> To fix the CSS so the slider is full width, you need to do this:
>> .mdl-slider
>> {
>> margin: 0px;
>> width: 100%;
>> }
>>
>> .mdl-slider__background-flex
>> {
>> margin: 0px;
>> width: calc(100% - 12px);
>> }
>>
>> The background-flex needs to be 12px less than the margin
>>
>> If you want a 10px margin, the css should be like this:
>>
>> .mdl-slider
>> {
>> margin: 10px;
>> width: calc(100% - 10px);
>> }
>>
>> .mdl-slider__background-flex
>> {
>> margin: 10px;
>> width: calc(100% - 22px);
>> }
>>
>> Unfortunately, FalconJX does not like calc() in CSS. When trying to
>> compile with CSS that looks like that, I get the following error:
>>
>> Internal error in ABC generator subsystem, when generating code for: [my
>> app]: java.lang.NullPointerException
>> at org.apache.flex.abc.instructionlist.InstructionList.addAll(
>> InstructionList.java:420)
>> at org.apache.flex.compiler.internal.as.codegen.
>> MXMLClassDirectiveProcessor.processMXMLStyle(MXMLClassDirectiveProcessor.
>> java:4277)
>> at org.apache.flex.compiler.internal.as.codegen.
>> MXMLClassDirectiveProcessor.processNode(MXMLClassDirectiveProcessor.
>> java:987)
>> at org.apache.flex.compiler.internal.as.codegen.
>> MXMLClassDirectiveProcessor.traverse(MXMLClassDirectiveProcessor.java:861)
>> at org.apache.flex.compiler.internal.as.codegen.
>> MXMLClassDirectiveProcessor.traverse(MXMLClassDirectiveProcessor.java:831)
>> at org.apache.flex.compiler.internal.as.codegen.
>> MXMLClassDirectiveProcessor.processMainClassDefinitionNode
>> (MXMLClassDirectiveProcessor.java:653)
>> at org.apache.flex.compiler.internal.as.codegen.
>> GlobalDirectiveProcessor.declareMXMLDocument(
>> GlobalDirectiveProcessor.java:518)
>> at org.apache.flex.compiler.internal.as.codegen.
>> DirectiveProcessor.processNode(DirectiveProcessor.java:232)
>> at org.apache.flex.compiler.internal.as.codegen.
>> DirectiveProcessor.traverse(DirectiveProcessor.java:188)
>> at org.apache.flex.compiler.internal.as.codegen.
>> ABCGenerator.generate(ABCGenerator.java:122)
>> at org.apache.flex.compiler.internal.units.MXMLCompilationUnit.
>> handleABCBytesRequest(MXMLCompilationUnit.java:199)
>> at org.apache.flex.compiler.internal.units.CompilationUnitBase.
>> processABCBytesRequest(CompilationUnitBase.java:873)
>> at org.apache.flex.compiler.internal.units.
>> CompilationUnitBase.access$300(CompilationUnitBase.java:108)
>> at org.apache.flex.compiler.internal.units.
>> CompilationUnitBase$4$1.call(CompilationUnitBase.java:310)
>> at org.apache.flex.compiler.internal.units.
>> CompilationUnitBase$4$1.call(CompilationUnitBase.java:306)
>> at org.apache.flex.compiler.internal.units.requests.
>> RequestMaker$1.call(RequestMaker.java:228)
>> at org.apache.flex.compiler.internal.units.requests.
>> RequestMaker$1.call(RequestMaker.java:222)
>> at java.util.concurrent.FutureTask.run(FutureTask.java:266)
>> at java.util.concurrent.ThreadPoolExecutor.runWorker(
>> ThreadPoolExecutor.java:1142)
>> at java.util.concurrent.ThreadPoolExecutor$Worker.run(
>> ThreadPoolExecutor.java:617)
>> at java.lang.Thread.run(Thread.java:745)
>>
>> I also made two changes to slider which I just committed:
>> 1. I removed the hard-coded width. There should not be a width hard coded
>> into the slider. If anything, it should be added to the default css, but I
>> don’t really see a need to have a default value.
>> 2. I changed the wrapper from p to div. MDL applies a 16px bottom padding
>> to p elements. I don’t see why we want to force the bottom padding to a
>> slider.
>>
>>> On Feb 16, 2017, at 11:50 AM, Harbs <ha...@gmail.com> wrote:
>>>
>>> To sum up the problems:
>>>
>>> 1. mdl applies a 20 px margin (I think it’s 30px for “flex” sliders)
>>> 2. This margin gets applied TWICE in FlexJS mdl. Once for the p element,
>> and then again for the input element. This adds up to a 40px margin.
>>> 3. The slider gets wrapped in a mdl-slider__container element. This is
>> done by the mdl js code. Because there are two mdl-slider elements, there
>> are two containers created instead of one.
>>> 4. The outer container (which should not exist) pushes the slider down.
>>>
>>> Problems 2,3 and 4 can be solved by only applying the classes to the
>> input and not the p element.
>>>
>>> Problem #1 seems to be by design for mdl, but can be overridden in css.
>> I don’t think that should be done by the FlexJS mdl library. If the client
>> wants to remove the margin, it should be done by them.
>>>
>>> My $0.02.
>>> Harbs
>>>
>>>> On Feb 16, 2017, at 11:12 AM, OK <po...@olafkrueger.net> wrote:
>>>>
>>>>> Can you exact specify what is the class of this container?
>>>>
>>>> There's a div that applies the class "mdl-slider__container" which sets
>> the
>>>> height to 18px [1].
>>>> After removing this the vertical gap goes away.
>>>>
>>>> The horizontal gap comes as Harbs said from MDL itself, this is not
>> nice
>>>> but not a FlexJS issue.
>>>>
>>>> Olaf
>>>>
>>>> [1] https://snag.gy/x0gfpW.jpg
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>> --
>>>> View this message in context: http://apache-flex-
>> development.2333347.n4.nabble.com/FlexJS-MDL-Layout-
>> Problems-tp59423p59531.html
>>>> Sent from the Apache Flex Development mailing list archive at
>> Nabble.com.
>>>
>>
>>
>
>
> --
>
> 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, MDL] Layout Problems
Posted by Carlos Rovira <ca...@codeoscopic.com>.
Hi Harbs,
for "calc", Alex fixed the ticket for calc that Om create some time ago. If
is failing, you should open it again.
regarding slider, is great you remove the hardcoded size, I think I forgot
to do that in my revision and clean.
The only think I 'd ask you if to check that the actual output of the
component is the same as MDL deserves :
https://getmdl.io/components/index.html#sliders-section
code for a slide extracted should be like this:
<div class="mdl-slider__container"><input class="mdl-slider mdl-js-slider
is-lowest-value is-upgraded" type="range" min="0" max="100" value="0"
tabindex="0" data-upgraded=",MaterialSlider"><div
class="mdl-slider__background-flex"><div
class="mdl-slider__background-lower" style="flex: 0 1 0px;"></div><div
class="mdl-slider__background-upper" style="flex: 1 1
0px;"></div></div></div>
Thanks for updating it! :)
2017-02-22 12:36 GMT+01:00 Harbs <ha...@gmail.com>:
> I committed a change today which fixes the double container problem.
>
> It took me quite some time to figure out how to fix the CSS.
>
> To fix the CSS so the slider is full width, you need to do this:
> .mdl-slider
> {
> margin: 0px;
> width: 100%;
> }
>
> .mdl-slider__background-flex
> {
> margin: 0px;
> width: calc(100% - 12px);
> }
>
> The background-flex needs to be 12px less than the margin
>
> If you want a 10px margin, the css should be like this:
>
> .mdl-slider
> {
> margin: 10px;
> width: calc(100% - 10px);
> }
>
> .mdl-slider__background-flex
> {
> margin: 10px;
> width: calc(100% - 22px);
> }
>
> Unfortunately, FalconJX does not like calc() in CSS. When trying to
> compile with CSS that looks like that, I get the following error:
>
> Internal error in ABC generator subsystem, when generating code for: [my
> app]: java.lang.NullPointerException
> at org.apache.flex.abc.instructionlist.InstructionList.addAll(
> InstructionList.java:420)
> at org.apache.flex.compiler.internal.as.codegen.
> MXMLClassDirectiveProcessor.processMXMLStyle(MXMLClassDirectiveProcessor.
> java:4277)
> at org.apache.flex.compiler.internal.as.codegen.
> MXMLClassDirectiveProcessor.processNode(MXMLClassDirectiveProcessor.
> java:987)
> at org.apache.flex.compiler.internal.as.codegen.
> MXMLClassDirectiveProcessor.traverse(MXMLClassDirectiveProcessor.java:861)
> at org.apache.flex.compiler.internal.as.codegen.
> MXMLClassDirectiveProcessor.traverse(MXMLClassDirectiveProcessor.java:831)
> at org.apache.flex.compiler.internal.as.codegen.
> MXMLClassDirectiveProcessor.processMainClassDefinitionNode
> (MXMLClassDirectiveProcessor.java:653)
> at org.apache.flex.compiler.internal.as.codegen.
> GlobalDirectiveProcessor.declareMXMLDocument(
> GlobalDirectiveProcessor.java:518)
> at org.apache.flex.compiler.internal.as.codegen.
> DirectiveProcessor.processNode(DirectiveProcessor.java:232)
> at org.apache.flex.compiler.internal.as.codegen.
> DirectiveProcessor.traverse(DirectiveProcessor.java:188)
> at org.apache.flex.compiler.internal.as.codegen.
> ABCGenerator.generate(ABCGenerator.java:122)
> at org.apache.flex.compiler.internal.units.MXMLCompilationUnit.
> handleABCBytesRequest(MXMLCompilationUnit.java:199)
> at org.apache.flex.compiler.internal.units.CompilationUnitBase.
> processABCBytesRequest(CompilationUnitBase.java:873)
> at org.apache.flex.compiler.internal.units.
> CompilationUnitBase.access$300(CompilationUnitBase.java:108)
> at org.apache.flex.compiler.internal.units.
> CompilationUnitBase$4$1.call(CompilationUnitBase.java:310)
> at org.apache.flex.compiler.internal.units.
> CompilationUnitBase$4$1.call(CompilationUnitBase.java:306)
> at org.apache.flex.compiler.internal.units.requests.
> RequestMaker$1.call(RequestMaker.java:228)
> at org.apache.flex.compiler.internal.units.requests.
> RequestMaker$1.call(RequestMaker.java:222)
> at java.util.concurrent.FutureTask.run(FutureTask.java:266)
> at java.util.concurrent.ThreadPoolExecutor.runWorker(
> ThreadPoolExecutor.java:1142)
> at java.util.concurrent.ThreadPoolExecutor$Worker.run(
> ThreadPoolExecutor.java:617)
> at java.lang.Thread.run(Thread.java:745)
>
> I also made two changes to slider which I just committed:
> 1. I removed the hard-coded width. There should not be a width hard coded
> into the slider. If anything, it should be added to the default css, but I
> don’t really see a need to have a default value.
> 2. I changed the wrapper from p to div. MDL applies a 16px bottom padding
> to p elements. I don’t see why we want to force the bottom padding to a
> slider.
>
> > On Feb 16, 2017, at 11:50 AM, Harbs <ha...@gmail.com> wrote:
> >
> > To sum up the problems:
> >
> > 1. mdl applies a 20 px margin (I think it’s 30px for “flex” sliders)
> > 2. This margin gets applied TWICE in FlexJS mdl. Once for the p element,
> and then again for the input element. This adds up to a 40px margin.
> > 3. The slider gets wrapped in a mdl-slider__container element. This is
> done by the mdl js code. Because there are two mdl-slider elements, there
> are two containers created instead of one.
> > 4. The outer container (which should not exist) pushes the slider down.
> >
> > Problems 2,3 and 4 can be solved by only applying the classes to the
> input and not the p element.
> >
> > Problem #1 seems to be by design for mdl, but can be overridden in css.
> I don’t think that should be done by the FlexJS mdl library. If the client
> wants to remove the margin, it should be done by them.
> >
> > My $0.02.
> > Harbs
> >
> >> On Feb 16, 2017, at 11:12 AM, OK <po...@olafkrueger.net> wrote:
> >>
> >>> Can you exact specify what is the class of this container?
> >>
> >> There's a div that applies the class "mdl-slider__container" which sets
> the
> >> height to 18px [1].
> >> After removing this the vertical gap goes away.
> >>
> >> The horizontal gap comes as Harbs said from MDL itself, this is not
> nice
> >> but not a FlexJS issue.
> >>
> >> Olaf
> >>
> >> [1] https://snag.gy/x0gfpW.jpg
> >>
> >>
> >>
> >>
> >>
> >>
> >>
> >> --
> >> View this message in context: http://apache-flex-
> development.2333347.n4.nabble.com/FlexJS-MDL-Layout-
> Problems-tp59423p59531.html
> >> Sent from the Apache Flex Development mailing list archive at
> Nabble.com.
> >
>
>
--
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, MDL] Layout Problems
Posted by Harbs <ha...@gmail.com>.
I committed a change today which fixes the double container problem.
It took me quite some time to figure out how to fix the CSS.
To fix the CSS so the slider is full width, you need to do this:
.mdl-slider
{
margin: 0px;
width: 100%;
}
.mdl-slider__background-flex
{
margin: 0px;
width: calc(100% - 12px);
}
The background-flex needs to be 12px less than the margin
If you want a 10px margin, the css should be like this:
.mdl-slider
{
margin: 10px;
width: calc(100% - 10px);
}
.mdl-slider__background-flex
{
margin: 10px;
width: calc(100% - 22px);
}
Unfortunately, FalconJX does not like calc() in CSS. When trying to compile with CSS that looks like that, I get the following error:
Internal error in ABC generator subsystem, when generating code for: [my app]: java.lang.NullPointerException
at org.apache.flex.abc.instructionlist.InstructionList.addAll(InstructionList.java:420)
at org.apache.flex.compiler.internal.as.codegen.MXMLClassDirectiveProcessor.processMXMLStyle(MXMLClassDirectiveProcessor.java:4277)
at org.apache.flex.compiler.internal.as.codegen.MXMLClassDirectiveProcessor.processNode(MXMLClassDirectiveProcessor.java:987)
at org.apache.flex.compiler.internal.as.codegen.MXMLClassDirectiveProcessor.traverse(MXMLClassDirectiveProcessor.java:861)
at org.apache.flex.compiler.internal.as.codegen.MXMLClassDirectiveProcessor.traverse(MXMLClassDirectiveProcessor.java:831)
at org.apache.flex.compiler.internal.as.codegen.MXMLClassDirectiveProcessor.processMainClassDefinitionNode(MXMLClassDirectiveProcessor.java:653)
at org.apache.flex.compiler.internal.as.codegen.GlobalDirectiveProcessor.declareMXMLDocument(GlobalDirectiveProcessor.java:518)
at org.apache.flex.compiler.internal.as.codegen.DirectiveProcessor.processNode(DirectiveProcessor.java:232)
at org.apache.flex.compiler.internal.as.codegen.DirectiveProcessor.traverse(DirectiveProcessor.java:188)
at org.apache.flex.compiler.internal.as.codegen.ABCGenerator.generate(ABCGenerator.java:122)
at org.apache.flex.compiler.internal.units.MXMLCompilationUnit.handleABCBytesRequest(MXMLCompilationUnit.java:199)
at org.apache.flex.compiler.internal.units.CompilationUnitBase.processABCBytesRequest(CompilationUnitBase.java:873)
at org.apache.flex.compiler.internal.units.CompilationUnitBase.access$300(CompilationUnitBase.java:108)
at org.apache.flex.compiler.internal.units.CompilationUnitBase$4$1.call(CompilationUnitBase.java:310)
at org.apache.flex.compiler.internal.units.CompilationUnitBase$4$1.call(CompilationUnitBase.java:306)
at org.apache.flex.compiler.internal.units.requests.RequestMaker$1.call(RequestMaker.java:228)
at org.apache.flex.compiler.internal.units.requests.RequestMaker$1.call(RequestMaker.java:222)
at java.util.concurrent.FutureTask.run(FutureTask.java:266)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
at java.lang.Thread.run(Thread.java:745)
I also made two changes to slider which I just committed:
1. I removed the hard-coded width. There should not be a width hard coded into the slider. If anything, it should be added to the default css, but I don’t really see a need to have a default value.
2. I changed the wrapper from p to div. MDL applies a 16px bottom padding to p elements. I don’t see why we want to force the bottom padding to a slider.
> On Feb 16, 2017, at 11:50 AM, Harbs <ha...@gmail.com> wrote:
>
> To sum up the problems:
>
> 1. mdl applies a 20 px margin (I think it’s 30px for “flex” sliders)
> 2. This margin gets applied TWICE in FlexJS mdl. Once for the p element, and then again for the input element. This adds up to a 40px margin.
> 3. The slider gets wrapped in a mdl-slider__container element. This is done by the mdl js code. Because there are two mdl-slider elements, there are two containers created instead of one.
> 4. The outer container (which should not exist) pushes the slider down.
>
> Problems 2,3 and 4 can be solved by only applying the classes to the input and not the p element.
>
> Problem #1 seems to be by design for mdl, but can be overridden in css. I don’t think that should be done by the FlexJS mdl library. If the client wants to remove the margin, it should be done by them.
>
> My $0.02.
> Harbs
>
>> On Feb 16, 2017, at 11:12 AM, OK <po...@olafkrueger.net> wrote:
>>
>>> Can you exact specify what is the class of this container?
>>
>> There's a div that applies the class "mdl-slider__container" which sets the
>> height to 18px [1].
>> After removing this the vertical gap goes away.
>>
>> The horizontal gap comes as Harbs said from MDL itself, this is not nice
>> but not a FlexJS issue.
>>
>> Olaf
>>
>> [1] https://snag.gy/x0gfpW.jpg
>>
>>
>>
>>
>>
>>
>>
>> --
>> View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Layout-Problems-tp59423p59531.html
>> Sent from the Apache Flex Development mailing list archive at Nabble.com.
>
Re: [FlexJS, MDL] Layout Problems
Posted by Harbs <ha...@gmail.com>.
To sum up the problems:
1. mdl applies a 20 px margin (I think it’s 30px for “flex” sliders)
2. This margin gets applied TWICE in FlexJS mdl. Once for the p element, and then again for the input element. This adds up to a 40px margin.
3. The slider gets wrapped in a mdl-slider__container element. This is done by the mdl js code. Because there are two mdl-slider elements, there are two containers created instead of one.
4. The outer container (which should not exist) pushes the slider down.
Problems 2,3 and 4 can be solved by only applying the classes to the input and not the p element.
Problem #1 seems to be by design for mdl, but can be overridden in css. I don’t think that should be done by the FlexJS mdl library. If the client wants to remove the margin, it should be done by them.
My $0.02.
Harbs
> On Feb 16, 2017, at 11:12 AM, OK <po...@olafkrueger.net> wrote:
>
>> Can you exact specify what is the class of this container?
>
> There's a div that applies the class "mdl-slider__container" which sets the
> height to 18px [1].
> After removing this the vertical gap goes away.
>
> The horizontal gap comes as Harbs said from MDL itself, this is not nice
> but not a FlexJS issue.
>
> Olaf
>
> [1] https://snag.gy/x0gfpW.jpg
>
>
>
>
>
>
>
> --
> View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Layout-Problems-tp59423p59531.html
> Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS, MDL] Layout Problems
Posted by OK <po...@olafkrueger.net>.
>If the Basic set has a component that MDL doesn't, MDL doesn't want you to
use
>that component. Or am I wrong about that?
The problem is that MDL doesn't implement the complete Material Design spec.
There's a lack of e.g. DropDown, DatePicker and maybe something other...
If MDL would represent the complete spec I think there're would be no need
to mix components.
Olaf
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Layout-Problems-tp59423p59550.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS, MDL] Layout Problems
Posted by Josh Tynjala <jo...@gmail.com>.
> If the Basic set has a component that MDL doesn't, MDL doesn't want you
to use that component. Or am I wrong about that?
MDL is a work in progress, much like FlexJS. Google hasn't necessarily
implemented every component that they want to add yet.
- Josh
Re: [FlexJS, MDL] Layout Problems
Posted by Alex Harui <ah...@adobe.com>.
On 2/16/17, 1:54 AM, "OK" <po...@olafkrueger.net> wrote:
>>I will try to create some beads which handle some mentioned cases above.
>
>From the FlexJS perspective folks of course could wondering why they can't
>remove this style but maybe from MDL perspective (including Material
>Design
>specs) this maybe makes sense [1].
>
>What I would like so say is that on the one hand we say "Use FlexJS MDL
>not
>the FlexJS way but the MDL way" and on the other hand we alyways want to
>mix
>components and different layout approaches.
>Don't know if this a bit inconsistent and confusing...
I've been wondering why folks want to mix MDL with other components.
AIUI, MDL is not just a theme, but an entire UX design and implementation.
From the little I've read, there should not be any such thing as a
missing component or layout in MDL. Every interaction and presentation
you want to make with your user has been specified and provided. If the
Basic set has a component that MDL doesn't, MDL doesn't want you to use
that component. Or am I wrong about that?
Now if you want to use the Basic set and just wished it looked better,
that's a different problem. Trevor proposed some ideas for a better
default look. I haven't had any time to try to implement that, although
I'd guess that there is a good chance it can't be done in Basic. Basic is
mostly trying to have one element per component, which means that the
visuals that cannot be expressed in CSS probably can't be controlled
without a different component set with different views. The Flat swc is
an example of where I boiled down the Flat Bootstrap theme into simpler
pieces. Something like that may be what we do to support Trevor's
proposal.
My 2 cents,
-Alex
Re: [FlexJS, MDL] Layout Problems
Posted by piotrz <pi...@gmail.com>.
No problem Olaf! :) Looking forward to see your try of MDL :)
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Layout-Problems-tp59423p59540.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS, MDL] Layout Problems
Posted by OK <po...@olafkrueger.net>.
>That's why I can provide some beads. If you wanted to use you will if not
the core implementation won't >be touched.
Yes sorry, this probably makes sens ;-)
Thanks for working on MDL!
Olaf
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Layout-Problems-tp59423p59539.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS, MDL] Layout Problems
Posted by piotrz <pi...@gmail.com>.
That's why I can provide some beads. If you wanted to use you will if not the
core implementation won't be touched.
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Layout-Problems-tp59423p59538.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS, MDL] Layout Problems
Posted by OK <po...@olafkrueger.net>.
>I will try to create some beads which handle some mentioned cases above.
From the FlexJS perspective folks of course could wondering why they can't
remove this style but maybe from MDL perspective (including Material Design
specs) this maybe makes sense [1].
What I would like so say is that on the one hand we say "Use FlexJS MDL not
the FlexJS way but the MDL way" and on the other hand we alyways want to mix
components and different layout approaches.
Don't know if this a bit inconsistent and confusing...
As Harbs said if the issues could be solved I would leave the origin margin
as it is and let the app developer decide what he would like to do.
Olaf
[1]
https://github.com/google/material-design-lite/blob/88872e672e41c56af0a78a35b34373b8c4a8c49d/src/slider/_slider.scss#L31
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Layout-Problems-tp59423p59536.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS, MDL] Layout Problems
Posted by piotrz <pi...@gmail.com>.
Hi Olaf,
I will try to create some beads which handle some mentioned cases above.
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Layout-Problems-tp59423p59534.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS, MDL] Layout Problems
Posted by OK <po...@olafkrueger.net>.
>Can you exact specify what is the class of this container?
There's a div that applies the class "mdl-slider__container" which sets the
height to 18px [1].
After removing this the vertical gap goes away.
The horizontal gap comes as Harbs said from MDL itself, this is not nice
but not a FlexJS issue.
Olaf
[1] https://snag.gy/x0gfpW.jpg
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Layout-Problems-tp59423p59531.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS, MDL] Layout Problems
Posted by piotrz <pi...@gmail.com>.
Harbs,
Can you exact specify what is the class of this container?
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Layout-Problems-tp59423p59524.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS, MDL] Layout Problems
Posted by Harbs <ha...@gmail.com>.
There are actually two problems with Slider. Besides the default 20px margins applied by the mdl css, there’s also an extra container/slider element in FlexJS which causes the margin to be doubled.
> On Feb 16, 2017, at 12:12 AM, piotrz <pi...@gmail.com> wrote:
>
> Alex,
>
> I like the idea! Maybe I should create two beads:
>
> LayoutNotImportantBead
> SliderNoLeftMarginBead
>
> What do the others thing ?
>
> Piotr
>
>
>
> -----
> Apache Flex PMC
> piotrzarzycki21@gmail.com
> --
> View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Layout-Problems-tp59423p59489.html
> Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS, MDL] Layout Problems
Posted by piotrz <pi...@gmail.com>.
Alex,
I like the idea! Maybe I should create two beads:
LayoutNotImportantBead
SliderNoLeftMarginBead
What do the others thing ?
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Layout-Problems-tp59423p59489.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS, MDL] Layout Problems
Posted by Alex Harui <ah...@adobe.com>.
Sounds like several folks have build MDL apps. We should survey the code
and look for repeating patterns and encapsulate those things as beads,
class selectors, etc. Then maybe the answer will become apparent.
-Alex
On 2/15/17, 12:45 PM, "piotrz" <pi...@gmail.com> wrote:
>Exactly Carlos.
>
>That's what I'm trying to get - an opinion whether we should provide such
>things in our library.
>
>Piotr
>
>
>
>-----
>Apache Flex PMC
>piotrzarzycki21@gmail.com
>--
>View this message in context:
>http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Layout-Pro
>blems-tp59423p59473.html
>Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS, MDL] Layout Problems
Posted by piotrz <pi...@gmail.com>.
Exactly Carlos.
That's what I'm trying to get - an opinion whether we should provide such
things in our library.
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Layout-Problems-tp59423p59473.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS, MDL] Layout Problems
Posted by Carlos Rovira <ca...@apache.org>.
Hi Piotr,
but in this way of proceed that means that all people using source js/css
MDL library in the world will need to make this hack to layout things right
isn't it?
C.
2017-02-15 21:01 GMT+01:00 piotrz <pi...@gmail.com>:
> Carlos,
>
> Saying general swc you mean as I mention earlier into our default.css?
> Cause
> when I add it will reolve Yishay issue.
>
> Piotr
>
>
>
> -----
> Apache Flex PMC
> piotrzarzycki21@gmail.com
> --
> View this message in context: http://apache-flex-
> development.2333347.n4.nabble.com/FlexJS-MDL-Layout-
> Problems-tp59423p59466.html
> Sent from the Apache Flex Development mailing list archive at Nabble.com.
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: [FlexJS, MDL] Layout Problems
Posted by piotrz <pi...@gmail.com>.
Carlos,
Saying general swc you mean as I mention earlier into our default.css? Cause
when I add it will reolve Yishay issue.
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Layout-Problems-tp59423p59466.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS, MDL] Layout Problems
Posted by OmPrakash Muppirala <bi...@gmail.com>.
On Wed, Feb 15, 2017 at 12:14 PM, piotrz <pi...@gmail.com> wrote:
> Hi Om,
>
> But saying using !import you mean do not add it to our library, but as an
> developer inside our app ?
>
Yes, I meant for the user-developer. But a component-developer can chose
to add the convenient VContainer ahd HContainer classes. Or perhaps we can
put these in the Express library.
> I'm not sure what is for this left margin, but I think this is something
> which we don't need. Cause if I have simple <js:Container> I expect that
> everything what is inside there it's displayed with margin = 0;
>
Yes, I hope we can get rid of the left margin by default.
>
> Piotr
>
>
>
> -----
> Apache Flex PMC
> piotrzarzycki21@gmail.com
> --
> View this message in context: http://apache-flex-
> development.2333347.n4.nabble.com/FlexJS-MDL-Layout-
> Problems-tp59423p59469.html
> Sent from the Apache Flex Development mailing list archive at Nabble.com.
>
Re: [FlexJS, MDL] Layout Problems
Posted by piotrz <pi...@gmail.com>.
Hi Om,
But saying using !import you mean do not add it to our library, but as an
developer inside our app ?
I'm not sure what is for this left margin, but I think this is something
which we don't need. Cause if I have simple <js:Container> I expect that
everything what is inside there it's displayed with margin = 0;
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Layout-Problems-tp59423p59469.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS, MDL] Layout Problems
Posted by OmPrakash Muppirala <bi...@gmail.com>.
As Yishay hinted earlier, we would need to to use !important for display:
flex
.layout {
display: flex !important;
}
On Wed, Feb 15, 2017 at 12:06 PM, OmPrakash Muppirala <bi...@gmail.com>
wrote:
> I have been meaning to add a note asking folks to test out the
> FlexTeamPage_MDL project
>
> https://github.com/apache/flex-asjs/tree/develop/
> examples/flexjs/FlexTeamPage_MDL
>
> Wherever I had layout issues, I simply created a container and gave it a
> className and did all my layout using FlexBox. That is something I can
> live with. Perhaps folks can just create re-usable VContainers or
> HContainers like this:
>
> VContainer:
>
> <Container className="layout horizontalLayout">
> </Container>
>
> HContainer:
>
> <Container className="layout verticalLayout">
> </Container>
>
> CSS:
>
> .layout {
> display: flex;
> }
>
> .horizontalLayout {
> flex-direction: row
> }
>
> .verticalLayout {
> flex-direction: column
> }
>
>
> On Wed, Feb 15, 2017 at 11:50 AM, Carlos Rovira <ca...@apache.org>
> wrote:
>
>> Hi,
>>
>> 2017-02-15 20:39 GMT+01:00 piotrz <pi...@gmail.com>:
>>
>> >
>> > I could add it this code to default.css, but is it something which we
>> > wanted
>> > ?
>> >
>> >
>> my guest is that we should upload this kind of css setups to a general SWC
>> since it will impact others.
>>
>> I think we need more experience in how to layout MDL. we should create
>> some
>> js-non-flexjs examples ourselves to exercise how things are done in order
>> to understand why things are behaving like this. Or see how people is
>> doing
>> searching on google.
>>
>> For example I started a new example MDLBlogExample to see where things are
>> not working as expected. I found some problems, but mostly due to CSS
>> errors that FlexJS still doesn't know how to handle. I left the example
>> unfinished, but I should fill JIRA tickets for the CSS things I found.
>>
>>
>>
>> --
>> Carlos Rovira
>> http://about.me/carlosrovira
>>
>
>
Re: [FlexJS, MDL] Layout Problems
Posted by OmPrakash Muppirala <bi...@gmail.com>.
I have been meaning to add a note asking folks to test out the
FlexTeamPage_MDL project
https://github.com/apache/flex-asjs/tree/develop/examples/flexjs/FlexTeamPage_MDL
Wherever I had layout issues, I simply created a container and gave it a
className and did all my layout using FlexBox. That is something I can
live with. Perhaps folks can just create re-usable VContainers or
HContainers like this:
VContainer:
<Container className="layout horizontalLayout">
</Container>
HContainer:
<Container className="layout verticalLayout">
</Container>
CSS:
.layout {
display: flex;
}
.horizontalLayout {
flex-direction: row
}
.verticalLayout {
flex-direction: column
}
On Wed, Feb 15, 2017 at 11:50 AM, Carlos Rovira <ca...@apache.org>
wrote:
> Hi,
>
> 2017-02-15 20:39 GMT+01:00 piotrz <pi...@gmail.com>:
>
> >
> > I could add it this code to default.css, but is it something which we
> > wanted
> > ?
> >
> >
> my guest is that we should upload this kind of css setups to a general SWC
> since it will impact others.
>
> I think we need more experience in how to layout MDL. we should create some
> js-non-flexjs examples ourselves to exercise how things are done in order
> to understand why things are behaving like this. Or see how people is doing
> searching on google.
>
> For example I started a new example MDLBlogExample to see where things are
> not working as expected. I found some problems, but mostly due to CSS
> errors that FlexJS still doesn't know how to handle. I left the example
> unfinished, but I should fill JIRA tickets for the CSS things I found.
>
>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
Re: [FlexJS, MDL] Layout Problems
Posted by Carlos Rovira <ca...@apache.org>.
Hi,
2017-02-15 20:39 GMT+01:00 piotrz <pi...@gmail.com>:
>
> I could add it this code to default.css, but is it something which we
> wanted
> ?
>
>
my guest is that we should upload this kind of css setups to a general SWC
since it will impact others.
I think we need more experience in how to layout MDL. we should create some
js-non-flexjs examples ourselves to exercise how things are done in order
to understand why things are behaving like this. Or see how people is doing
searching on google.
For example I started a new example MDLBlogExample to see where things are
not working as expected. I found some problems, but mostly due to CSS
errors that FlexJS still doesn't know how to handle. I left the example
unfinished, but I should fill JIRA tickets for the CSS things I found.
--
Carlos Rovira
http://about.me/carlosrovira
Re: [FlexJS, MDL] Layout Problems
Posted by piotrz <pi...@gmail.com>.
Hi Yishay,
I have found solution but I'm not sure whether I should commit it. In order
to get rid of this ugly margin on the left you have to add style for
container of MDL slider - to your mdl-styles.css.
.mdl-slider__container
{
margin: 0, 0, 0, -20px;
}
I could add it this code to default.css, but is it something which we wanted
?
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Layout-Problems-tp59423p59463.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS, MDL] Layout Problems
Posted by OK <po...@olafkrueger.net>.
Hi Yishayw,
yishayw wrote
> Carols, Piotrz, if you have time to have a look at this [1] it would be
> helpful. We spent some time trying to figure this out, but ended up just
> overriding some css attributes with !important, which doesn't seem robust.
>
> [1] https://issues.apache.org/jira/browse/FLEX-35266
It seems to me that at least the horizontal gap is also there by using
"native" MDL [1],[2] (Maybe cause of some margins)
HTH,
Olaf
[1] https://snag.gy/wFRQhH.jpg
[2] https://codepen.io/ok-at-codepen/pen/bgZWNq
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Layout-Problems-tp59423p59432.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.