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.
