Bug/layout issues - Githubissues

jvillarreal-kpmg commented 9 years ago

Fixes layout issues:

Fixes scrolling layout issues in firefox.
Fixes loading not always being centered in chrome and devices.
Removes workaround setting height to 0. Now flex is working correctly and taking full space correctly.

There are some important rules for Material in order to make the layout work in different browsers:

Rules in Chrome:

Requires the <body> to have layout="column" and [ layout-fill or flex ]. Otherwise is not going to respect md-content scroll regions:

<body ng-app="starterApp" layout="column" layout-fill>

It cannot handle more than one nested div with usage of layout-fill like this:

<div layout="column" layout-fill>
  <div layout="column" layout-fill>

If that appears it won't use the entire space for any child with flex. It won't be able to center items.

Rules in Firefox:

Requires that for any md-content that requires scrolling, parents that contain layout="column" and flex must be md-content and not div. Otherwise it won't use the entire space for any child with flex. It won't center items and tabs will not take full space.

jcornwell-kpmg commented 9 years ago

@jvillarreal-kpmg , I did some testing of this PR's branch (http://ec2-52-1-174-71.compute-1.amazonaws.com:8888/origin/bug/layout-issues/) and noticed this on Android phone Chrome:

On the Search screen, the vertical layout of the search fields gets compressed (due to onscreen keyboard) and the Keywords search input is hidden behind the screen's toolbar. You can still type but you can't see what your are typing until you dismiss the onscreen keyboard.

I tested on iPad mini, iPhone, Chrome desktop, and Firefox desktop and I think the layout changes look ok there.

jcornwell-kpmg commented 9 years ago

The last update @jvillarreal-kpmg made fixes the Android Chrome problem I described earlier.

jardilio-kpmg / ads-rfq-prototype