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 <harbs.li...@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.rov...@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 <harbs.li...@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 <harbs.li...@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 <p...@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.
