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.
>
