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.
> 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 .
> 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.
>  https://snag.gy/x0gfpW.jpg
> View this message in context:
> Sent from the Apache Flex Development mailing list archive at Nabble.com.