angular component elements not always stylable in ie11

Question

when I create a component ng g c my-component, the content is rendering fine in ie11 once I turn on the polyfills. However, that component breaks the CSS, refusing to be styled -- in particular, it refuses to take any height, regardless of contents. Debugging, at first I thought that it refuses a background color (which I use to identify blocks in ie since there is no highlight-on-hover), but when I add an explicit height suddenly the background color renders.

example (inside of app-my-component):

<article class="my routable component">
  <app-child-component></app-child-component>
  <footer>should be under the inner component content</footer>
</article>

inside app-child-component:

<!-- this section will never have a height -->
<section class="child component">
  <app-inner-component></app-inner-component>
</section>

inside app-inner-component:

<!-- this section naturally will have height after the async returns results -->
<section class="inner component">
  <div *ngFor="const item in asyncResultItems">hi mom!</div>
</section>

The footer text will render on top of the app-inner component's content. I would prefer the footer text to follow -- basically, IE11 should treat app-* elements like divs, but it seems to refuse to count them when giving a height at all (styles inside work just fine, though).

What can be done about that (simply wrapping the component in a containing div also does not work, by itself)?

full example: https://stackblitz.com/edit/angular-fhmded

Note, thanks to amazing help, I have diagnosed the problem (I added more and more of the differences between the minimum example and my actual code til I reproduced it). Flex column is breaking on the child component.

I'm afraid there is not enough information here to determine the problem. This stackblitz (stackblitz.com/edit/angular-u23wd8) works just fine if I use the snippets you've posted. Here is a screenshot: imgur.com/a/4dT49FI — Pace
– Pace, Commented Jul 22, 2019 at 17:43
your example was most kind, thank you. I am able to see now my problem https://stackblitz.com/edit/angular-fhmded — roberto tomás
– roberto tomás, Commented Jul 22, 2019 at 21:31

Pace · Accepted Answer · 2019-07-22 23:33:48Z

2

IE11 does not properly support flexbox. As you can see on https://caniuse.com/#feat=flexbox there are a number of known issues. It is also very sensitive to syntax. If I change your flex: 1 rules to flex: 1 1 auto then it seems to work correctly for me at least.

answered Jul 22, 2019 at 23:33

Pace

44.5k14 gold badges128 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular component elements not always stylable in ie11

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related