[FlexJS, MDL] Layout Problems

classic Classic list List threaded Threaded
38 messages Options
12
Reply | Threaded
Open this post in threaded view
|

[FlexJS, MDL] Layout Problems

yishayw
Carols, Piotrz, if you have time to have a look at this [1] it would be helpful. We spent some time trying to figure this out, but ended up just overriding some css attributes with !important, which doesn't seem robust.

[1] https://issues.apache.org/jira/browse/FLEX-35266
Reply | Threaded
Open this post in threaded view
|

Re: [FlexJS, MDL] Layout Problems

Olaf Krueger
Hi Yishayw,

yishayw wrote
Carols, Piotrz, if you have time to have a look at this [1] it would be helpful. We spent some time trying to figure this out, but ended up just overriding some css attributes with !important, which doesn't seem robust.

[1] https://issues.apache.org/jira/browse/FLEX-35266
It seems to me that at least the horizontal gap is also there by using "native" MDL [1],[2] (Maybe cause of some margins)

HTH,
Olaf

[1] https://snag.gy/wFRQhH.jpg
[2] https://codepen.io/ok-at-codepen/pen/bgZWNq
Reply | Threaded
Open this post in threaded view
|

Re: [FlexJS, MDL] Layout Problems

piotrz
In reply to this post by yishayw
Hi Yishay,

I have found solution but I'm not sure whether I should commit it. In order to get rid of this ugly margin on the left you have to add style for container of MDL slider - to your mdl-styles.css.

.mdl-slider__container
{
  margin: 0, 0, 0, -20px;
}

I could add it this code to default.css, but is it something which we wanted ?

Piotr
Reply | Threaded
Open this post in threaded view
|

Re: [FlexJS, MDL] Layout Problems

Carlos Rovira-3
Hi,

2017-02-15 20:39 GMT+01:00 piotrz <[hidden email]>:

>
> I could add it this code to default.css, but is it something which we
> wanted
> ?
>
>
my guest is that we should upload this kind of css setups to a general SWC
since it will impact others.

I think we need more experience in how to layout MDL. we should create some
js-non-flexjs examples ourselves to exercise how things are done in order
to understand why things are behaving like this. Or see how people is doing
searching on google.

For example I started a new example MDLBlogExample to see where things are
not working as expected. I found some problems, but mostly due to CSS
errors that FlexJS still doesn't know how to handle. I left the example
unfinished, but I should fill JIRA tickets for the CSS things I found.



--
Carlos Rovira
http://about.me/carlosrovira
Reply | Threaded
Open this post in threaded view
|

Re: [FlexJS, MDL] Layout Problems

piotrz
Carlos,

Saying general swc you mean as I mention earlier into our default.css? Cause when I add it will reolve Yishay issue.

Piotr
Reply | Threaded
Open this post in threaded view
|

Re: [FlexJS, MDL] Layout Problems

OmPrakash Muppirala
In reply to this post by Carlos Rovira-3
I have been meaning to add a note asking folks to test out the
FlexTeamPage_MDL project

https://github.com/apache/flex-asjs/tree/develop/examples/flexjs/FlexTeamPage_MDL

Wherever I had layout issues, I simply created a container and gave it a
className and did all my layout using FlexBox.  That is something I can
live with.  Perhaps folks can just create re-usable VContainers or
HContainers like this:

VContainer:

<Container className="layout horizontalLayout">
</Container>

HContainer:

<Container className="layout verticalLayout">
</Container>

CSS:

.layout {
    display: flex;
}

.horizontalLayout {
    flex-direction: row
}

.verticalLayout {
    flex-direction: column
}


On Wed, Feb 15, 2017 at 11:50 AM, Carlos Rovira <[hidden email]>
wrote:

> Hi,
>
> 2017-02-15 20:39 GMT+01:00 piotrz <[hidden email]>:
>
> >
> > I could add it this code to default.css, but is it something which we
> > wanted
> > ?
> >
> >
> my guest is that we should upload this kind of css setups to a general SWC
> since it will impact others.
>
> I think we need more experience in how to layout MDL. we should create some
> js-non-flexjs examples ourselves to exercise how things are done in order
> to understand why things are behaving like this. Or see how people is doing
> searching on google.
>
> For example I started a new example MDLBlogExample to see where things are
> not working as expected. I found some problems, but mostly due to CSS
> errors that FlexJS still doesn't know how to handle. I left the example
> unfinished, but I should fill JIRA tickets for the CSS things I found.
>
>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
Reply | Threaded
Open this post in threaded view
|

Re: [FlexJS, MDL] Layout Problems

OmPrakash Muppirala
As Yishay hinted earlier, we would need to to use !important for display:
flex

.layout {
    display: flex !important;
}

On Wed, Feb 15, 2017 at 12:06 PM, OmPrakash Muppirala <[hidden email]>
wrote:

> I have been meaning to add a note asking folks to test out the
> FlexTeamPage_MDL project
>
> https://github.com/apache/flex-asjs/tree/develop/
> examples/flexjs/FlexTeamPage_MDL
>
> Wherever I had layout issues, I simply created a container and gave it a
> className and did all my layout using FlexBox.  That is something I can
> live with.  Perhaps folks can just create re-usable VContainers or
> HContainers like this:
>
> VContainer:
>
> <Container className="layout horizontalLayout">
> </Container>
>
> HContainer:
>
> <Container className="layout verticalLayout">
> </Container>
>
> CSS:
>
> .layout {
>     display: flex;
> }
>
> .horizontalLayout {
>     flex-direction: row
> }
>
> .verticalLayout {
>     flex-direction: column
> }
>
>
> On Wed, Feb 15, 2017 at 11:50 AM, Carlos Rovira <[hidden email]>
> wrote:
>
>> Hi,
>>
>> 2017-02-15 20:39 GMT+01:00 piotrz <[hidden email]>:
>>
>> >
>> > I could add it this code to default.css, but is it something which we
>> > wanted
>> > ?
>> >
>> >
>> my guest is that we should upload this kind of css setups to a general SWC
>> since it will impact others.
>>
>> I think we need more experience in how to layout MDL. we should create
>> some
>> js-non-flexjs examples ourselves to exercise how things are done in order
>> to understand why things are behaving like this. Or see how people is
>> doing
>> searching on google.
>>
>> For example I started a new example MDLBlogExample to see where things are
>> not working as expected. I found some problems, but mostly due to CSS
>> errors that FlexJS still doesn't know how to handle. I left the example
>> unfinished, but I should fill JIRA tickets for the CSS things I found.
>>
>>
>>
>> --
>> Carlos Rovira
>> http://about.me/carlosrovira
>>
>
>
Reply | Threaded
Open this post in threaded view
|

Re: [FlexJS, MDL] Layout Problems

piotrz
In reply to this post by OmPrakash Muppirala
Hi Om,

But saying using !import you mean do not add it to our library, but as an developer inside our app ?
I'm not sure what is for this left margin, but I think this is something which we don't need. Cause if I have simple <js:Container> I expect that everything what is inside there it's displayed with margin = 0;

Piotr
Reply | Threaded
Open this post in threaded view
|

Re: [FlexJS, MDL] Layout Problems

Carlos Rovira-3
In reply to this post by piotrz
Hi Piotr,
but in this way of proceed that means that all people using source js/css
MDL library in the world will need to make this hack to layout things right
isn't it?

C.


2017-02-15 21:01 GMT+01:00 piotrz <[hidden email]>:

> Carlos,
>
> Saying general swc you mean as I mention earlier into our default.css?
> Cause
> when I add it will reolve Yishay issue.
>
> Piotr
>
>
>
> -----
> Apache Flex PMC
> [hidden email]
> --
> View this message in context: http://apache-flex-
> development.2333347.n4.nabble.com/FlexJS-MDL-Layout-
> Problems-tp59423p59466.html
> Sent from the Apache Flex Development mailing list archive at Nabble.com.
>



--
Carlos Rovira
http://about.me/carlosrovira
Reply | Threaded
Open this post in threaded view
|

Re: [FlexJS, MDL] Layout Problems

OmPrakash Muppirala
In reply to this post by piotrz
On Wed, Feb 15, 2017 at 12:14 PM, piotrz <[hidden email]> wrote:

> Hi Om,
>
> But saying using !import you mean do not add it to our library, but as an
> developer inside our app ?
>

Yes, I meant for the user-developer.  But a component-developer can chose
to add the convenient VContainer ahd HContainer classes.  Or perhaps we can
put these in the Express library.


> I'm not sure what is for this left margin, but I think this is something
> which we don't need. Cause if I have simple <js:Container> I expect that
> everything what is inside there it's displayed with margin = 0;
>

Yes, I hope we can get rid of the left margin by default.


>
> Piotr
>
>
>
> -----
> Apache Flex PMC
> [hidden email]
> --
> View this message in context: http://apache-flex-
> development.2333347.n4.nabble.com/FlexJS-MDL-Layout-
> Problems-tp59423p59469.html
> Sent from the Apache Flex Development mailing list archive at Nabble.com.
>
Reply | Threaded
Open this post in threaded view
|

Re: [FlexJS, MDL] Layout Problems

piotrz
In reply to this post by Carlos Rovira-3
Exactly Carlos.

That's what I'm trying to get - an opinion whether we should provide such things in our library.

Piotr
Reply | Threaded
Open this post in threaded view
|

Re: [FlexJS, MDL] Layout Problems

Alex Harui
Sounds like several folks have build MDL apps.  We should survey the code
and look for repeating patterns and encapsulate those things as beads,
class selectors, etc.  Then maybe the answer will become apparent.

-Alex

On 2/15/17, 12:45 PM, "piotrz" <[hidden email]> wrote:

>Exactly Carlos.
>
>That's what I'm trying to get - an opinion whether we should provide such
>things in our library.
>
>Piotr
>
>
>
>-----
>Apache Flex PMC
>[hidden email]
>--
>View this message in context:
>http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Layout-Pro
>blems-tp59423p59473.html
>Sent from the Apache Flex Development mailing list archive at Nabble.com.

Reply | Threaded
Open this post in threaded view
|

Re: [FlexJS, MDL] Layout Problems

piotrz
Alex,

I like the idea! Maybe I should create two beads:

LayoutNotImportantBead
SliderNoLeftMarginBead

What do the others thing ?

Piotr
Reply | Threaded
Open this post in threaded view
|

Re: [FlexJS, MDL] Layout Problems

Harbs
There are actually two problems with Slider. Besides the default 20px margins applied by the mdl css, there’s also an extra container/slider element in FlexJS which causes the margin to be doubled.

> On Feb 16, 2017, at 12:12 AM, piotrz <[hidden email]> wrote:
>
> Alex,
>
> I like the idea! Maybe I should create two beads:
>
> LayoutNotImportantBead
> SliderNoLeftMarginBead
>
> What do the others thing ?
>
> Piotr
>
>
>
> -----
> Apache Flex PMC
> [hidden email]
> --
> View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Layout-Problems-tp59423p59489.html
> Sent from the Apache Flex Development mailing list archive at Nabble.com.

Reply | Threaded
Open this post in threaded view
|

Re: [FlexJS, MDL] Layout Problems

piotrz
Harbs,

Can you exact specify what is the class of this container?

Piotr
Reply | Threaded
Open this post in threaded view
|

Re: [FlexJS, MDL] Layout Problems

Olaf Krueger
>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



Reply | Threaded
Open this post in threaded view
|

Re: [FlexJS, MDL] Layout Problems

piotrz
Hi Olaf,

I will try to create some beads which handle some mentioned cases above.

Piotr
Reply | Threaded
Open this post in threaded view
|

Re: [FlexJS, MDL] Layout Problems

Harbs
In reply to this post by Olaf Krueger
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 <[hidden email]> 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.

Reply | Threaded
Open this post in threaded view
|

Re: [FlexJS, MDL] Layout Problems

Olaf Krueger
In reply to this post by piotrz
>I will try to create some beads which handle some mentioned cases above.

From the FlexJS perspective folks of course could wondering why they can't remove this style but maybe from MDL perspective (including Material Design specs) this maybe makes sense [1].

What I would like so say is that on the one hand we say "Use FlexJS MDL not the FlexJS way but the MDL way" and on the other hand we alyways want to mix components and different layout approaches.
Don't know if this a bit inconsistent and confusing...

As Harbs said if the issues could be solved I would leave the origin margin as it is and let the app developer decide what he would like to do.

Olaf




[1] https://github.com/google/material-design-lite/blob/88872e672e41c56af0a78a35b34373b8c4a8c49d/src/slider/_slider.scss#L31



Reply | Threaded
Open this post in threaded view
|

Re: [FlexJS, MDL] Layout Problems

piotrz
That's why I can provide some beads. If you wanted to use you will if not the core implementation won't be touched.

Piotr
12