Search code examples
csshtmlinternet-explorerflexboxangular-material

Text flowing outside div in IE with angular material

I am having these issues using angular material on IE (I'm using latest version edge and same result for other versions (9,10,11)

  1. Text is flowing outside div tag enter image description here

The below is snippet code for the current div containing 'Task' item, This is the html and CSS only (the screenshot will demonstrate the issue). (note that multilingual-message is a custom directive for multi-language texts support.)

.comp-insp-th .th-cell {
  background: #1e9a9f;
  padding: 10px 5px;
  margin: 5px 0px;
}
<div class="th-cell flex" flex="">
  <multilingual-message message-id="Home.Task" class="ng-isolate-scope">
    <span ng-bind-html="message[CurrentSettings.language] | unsafeHtml">Task</span>
  </multilingual-message>
</div>

  1. Divs (tags) not taking paddings and margins, the below is snippet code with styles, using angular material directive 'layout-align' and assigned as "space-between stretch" which will add space between items in column, still the tags are overlapping and paddings/margins not working even if added manually.

enter image description here

Solution

  • I tried angular material Troubleshooting tips but it did not help me that much, The two issues were the effect of flexbox layout which is not totally supported on IE-11, then after a deep inspection -and with the help of a friend- I figure it out, the solution is adding -ms-flex: 1 0 30px to the .flex class of the element where 30px indicates the prefferedHeight for the flex item, then change the value based on each element height you preffer. Note to mention that you should always add a selector before .flex class for your current element, in my example:

    .comp-insp-th .th-cell .flex{
  -ms-flex:1 0 30px !important;
}