Applying css grid style using typescript not working in IE. Vue JS

I have a title block where I am applying css using the typescript method in Vue js. The style is about applying rows and column value to CSS grid. Since I am using dynamic values I have to use method to apply those values inline. Below is my code:

HTML:

<div :style="getTitleStyle(rowIndex, columnIndex)">{{title}}
</div>

TypeScript:

 getTitleStyle: function(rowIndex, columnIndex) {
        return {
          'grid-row-start': rowIndex,
          '-ms-grid-row': rowIndex,
          'grid-column-start': columnIndex,
          '-ms-grid-column': columnIndex
        }
      }

So the inline style is being applied but since IE 11 is not rendering the inline style I am providing. Here rowIndex and columnIndex contains intege values for rows and column.

2 answers

  • answered 2019-11-13 19:49 Mileta Dulovic

    IE is not supporting grid. I suggest you switch to flex. Also. Flex wont work under IE 11 as it should. And flex won't work on items that have min-height and max-height properties if their parents have display-flex so take care of that.

    You can check any other info here

  • answered 2019-11-13 22:40 romie99

    So I found a solution which is bit weird but I am posting it anyway because it may help someone. I was able to render the inline style for IE using camleCase version of the same attributes.

      getTitleStyle: function(rowIndex, columnIndex) {
            return {
              'grid-row-start': rowIndex,
              'grid-column-start': columnIndex,
              msGridColumn:columnIndex,
              msGridRow :rowIndex,
            }
          }
    

    you can see instead of writing traditional kebab-case('-ms-grid-row'), I am using camelCase (msGridRow). I don't know the reason why IE11 react this way but that is the solution I am moving forward with.