Bugfix IE11, known issue with flex-direction: column

[rooney]

flex-direction: column ignores min-height,
see: https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview

the proposed solution is to use flex-shrink: 0,
see: http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/

[MartijnR]

That looks exciting! Will check it out.

❌ small form OC theme: not stretching to bottom of window (minor?)
❌ loading screen very small - is same as previous issue (minor?), this issue can be reduced by adding to _iefix.scss:

.form__loader {
        min-height: 200px;
}

✅ grid theme
❌ analog pickers not stretching to maximum height (minor, I think)
✅ check if MS Edge also captured by media
✅ long form, not in pages mode
✅ different screensizes, responsive to small widths?
✅ ] add ?touch=true to simulate touchscreen
✅ print style
✅ : form in pages mode
❌ side slider stretching to bottom (check long form): not stretching to bottom (major)
✅ rtl

before merging:

• add form__loader 'fix' from above
• add comment to readme.md about IE11 support: Draft records and editing of existing records does not work in IE11. Slightly degraded styling in IE11 is considered acceptable.
• remove require('./module/redirect-IE') from public/js/src/main-webform.js

[MartijnR]

@kkrumlian @rooney @sdibona Found issues 1, 2, 3 and 4. See above (incl workaround to make 2 less serious) and screenshots below in order. If you consider issues 1, 2 and 3 (which probably all have the same cause - broken flex stretching) as an acceptable degraded experience for IE11 only, then only issue 4 would need to be resolved. Issue 4 seems important to me because if the users scrolls to the bottom of a long form and clicks the side slider handle, the user probably won't be able to find the side slider.

[rooney]

@kkrumlian @MartijnR

Fahri has revised his commit to address Martijn's feedback

[MartijnR]

Confirmed that this fixes issue 4! 👍

I've added a few little things (workaround for issue 2) and stuffed it all in branch fix/IE-styling-2 (off-master, doesn't include iOS fixes). 4a4b09a

@kkrumlian Just tell me if you want me to merge this.

[kkrumlian]

@MartijnR Yes please let's merge it.

[MartijnR]

Done! (note the iOS fixes are not merged yet, pending any tests by OC. I have merged and reorganized them in kobotoolbox/enketo-express already.)