Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Flexbox Styling IE Issue

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #243169
    jackett_dad
    Participant

    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

    #243187
    Atelierbram
    Participant

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

    #243189
    jackett_dad
    Participant

    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.

    #243213
    Atelierbram
    Participant

    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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.