Flexbox Styling IE Issue

[jackett_dad]

I am trying to create a layout that will display a set of dialog labels and fields in the middle, with a column to the left and right of all of these that spans all rows.

The code pen for this can be seen here: http://codepen.io/jackett_dad/pen/wWgyvM?editors=1111

This works in Chrome, but not in IE11 and I wouldd like them both the behave the same. The view should be shown as having an asterisk centered vertically in the first column and last column spanning four columns (or however many columns are in the middle two rows), and the middle two columns shows four labelled fields.

In IE11 (I need this for IE10 as well, but I have not even looked yet), things are a couple problems with the layout but I will settle for solving the first issue of the label column not filling the available width as it does in Chrome.

Any help would be appreciated.

Scott

[Atelierbram]

Would you do feature-detection with Modernizr, or with a small javascript snippet in order to target browsers that don’t understand flexbox?

[jackett_dad]

I have the luxury of knowing that the product I’m working only needs to support IE10+ and Chrome. However, I’ve just realized that I may need to support IE9 and that I think blows the whole idea of using Flexbox away, unless I can use the polyfill without suffering too big a performance hit. So the answer is, I don’t need the javascript snippet for detection–I already have a way to detect the browser version and I am lead to believe that IE10 and 11 support flex displays.

[Atelierbram]

things are a couple problems with the layout but I will settle for solving the first issue of the label column not filling the available width as it does in Chrome

Kind of faked it here by giving the wrapper section the same lightblue background-color. Feels strangely hacky doing this with display: table and floats now in stead of flexbox, but I hope this is helpful.

http://codepen.io/atelierbram/pen/oLZWmK

[Author]

Posts