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 <carlos.rov...@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 <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.
