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.
