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.
