14

Here is an interesting question that I was kind of ignoring, until now. It seems like Angular2 renders the content inside directive tags. But, for router-outlet, it happens to be like a sibling.

My first question is: why? Just out of interest.

I would not worry about it much, but it is now actually causing a problem in my app. I have two nested outlets and for some inexplicable reason, the child one is taking 15px height on the page and does not matter what I do, I can't get rid of it. (see screenshot) enter image description here

Is what I described really the case or I am simply doing something wrong? Also, I have no idea at this point how to approach this, searched all over, didn't find anything.

Thanks for your help.

UPDATE here is my less file:

@import "../../node_modules/bootstrap-less/bootstrap/bootstrap";
@import "../../node_modules/font-awesome/less/font-awesome";
@icon-font-path: "./bootstrap/fonts/";
@fa-font-path: "./font-awesome/fonts";
@import "rrm.less";

html, body {
  height: 100% !important;
}
body {
  padding-top: 80px;
}
.load-container {
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  .loaing {
    position: fixed;
    left: 50%;
    top: 35%;
    z-index: 1000;
    height: 31px;
    width: 31px;
  }
}
.top-navbar {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background-color: #FFFFFF;
  height: 80px;
  &.floating {
    .box-shadow(0 1px 3px rgba(0,0,0,.25));
  }
  .navbar-brand {
    height: auto;
    img {
      height: 60px;
    }
  }
  .navbar-nav > li > a {
    font-size: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 50px;
  }
}
.rrm-container {
  height:100%;
  display: table;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 0px;
  padding-right: 0px;
  .rrm-wrapper {
    height: 100%;
    display: table-row;
    .left-menu {
      float: none;
      display: table-cell;
      .box-shadow(0 1px 3px rgba(0,0,0,.25));
      ul {
        li {
          border: none;
          background-color: transparent;
        }
      }
    }
    .content {
      float: none;
      display: table-cell;
    }
  }
}

And here is the box model that FF computes: enter image description here

enter image description here

KB_
  • 2,113
  • 2
  • 26
  • 28
Shurik Agulyansky
  • 2,607
  • 2
  • 34
  • 76
  • Can you create a Plunker that allows to reproduce. In https://plnkr.co/edit/1iYQuE?p=preview the size of the `` is `0x0` – Günter Zöchbauer Apr 09 '16 at 08:21
  • Obviously this is CSS issue (and I even know what exactly might cause it). But you should share what styles are applied to `router-outlet` element in order to confirm my guess. – dfsq Apr 09 '16 at 08:25
  • @GünterZöchbauer I tried the plunker, and copy pasted my entire css into it. I cannot reproduce it... – Shurik Agulyansky Apr 09 '16 at 08:34
  • Did you add some CSS that might effect `` in your application that you didn't add in the Plunker? – Günter Zöchbauer Apr 09 '16 at 08:34
  • @dfsq I don't have any specific style for `router-outlet` even more than that, originally it is `secure-outlet` and I changed it to see if it's something wrong with how my custom outlet is rendered. And it behaves exactly the same. I can attach the CSS. – Shurik Agulyansky Apr 09 '16 at 08:36
  • @GünterZöchbauer I took the copy of a file that was delivered to the browser. Basically the whole thing as is. – Shurik Agulyansky Apr 09 '16 at 08:38
  • Why is it rendered as `` when you use `secure-outlet` as selector (http://stackoverflow.com/questions/36445183/service-class-is-not-injected-in-angular2). What styles does Chrome devtools show for the `` tag? – Günter Zöchbauer Apr 09 '16 at 08:40
  • @GünterZöchbauer hmmm..., this is interesting, chrome renders it correctly (0x0). It is firefox that not happy. And the style of the element is nothing `element { }` – Shurik Agulyansky Apr 09 '16 at 08:43
  • I don't use FF much but I guess it also allows to investigate the applied styles. Does it show anything? – Günter Zöchbauer Apr 09 '16 at 08:43
  • It shows 17.05 height, does it show what styles are applied to the element that cause this height? As a workaround I guess you can set ` – Günter Zöchbauer Apr 09 '16 at 08:49
  • I guess `router-outlet {display: block}` should fix it. Can you confirm? – dfsq Apr 09 '16 at 08:51
  • So none of the changes on display do not help. The only thing that does, is if I set the `fon-size` of the `html` element to `0` – Shurik Agulyansky Apr 09 '16 at 08:56
  • Yes, font-size: 0 or line-height: 0 should work too. However, strange that display: block didn't work. – dfsq Apr 09 '16 at 08:57
  • But, the issue is, it only works if I set the `html` to font-size 0. Does not change anything if I set it on the router. – Shurik Agulyansky Apr 09 '16 at 09:00
  • removing these two from bootstrap: `-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;` reduces the height by two px :) – Shurik Agulyansky Apr 09 '16 at 09:01
  • what about `router-outlet {font-size: 0; line-hight: 0}`? – dfsq Apr 09 '16 at 09:02
  • So, it reduced the height to 0, but the whole thing is still shifted down the same 17px... – Shurik Agulyansky Apr 09 '16 at 09:05
  • Here, reproduced it with just HTML: https://plnkr.co/edit/TbpSzRuxpyeH3ayTdkeE?p=preview make sure that you look at this with a wide screen. See the difference on crhome and FF. https://run.plnkr.co/Xu6k1bYJDkfIJm81/ – Shurik Agulyansky Apr 09 '16 at 09:18
  • 1
    [Try this](https://plnkr.co/edit/Oe0QrxGppWT8D3v9vLjO?p=preview), I have changed only three lines on main.css [8631,8632,8636]. The issue is related to how firefox renderers elements with display `table-*`. I changed the ones related to your problem to `flex` display. But you have many others with `display:table-*` – Abdulrahman Alsoghayer Apr 13 '16 at 09:05
  • It seems that some people have this issue and some people don't. I placed `router-outlet{display:none;}` in my reset and it has solved the issue permanently. If there is an issue with that I hope someone corrects me here. – Ben Racicot Dec 06 '17 at 21:14

2 Answers2

3

In response to your first question of why place the component template as a sibling of the <router-outlet> and not inside of it, there are a couple of github threads which shed some light.

https://github.com/angular/angular/issues/8529#issuecomment-217718704 https://github.com/angular/angular/issues/4679

Most relevant:

The original reason for this behavior was to enable animation of elements between views during which time both source and destination components would need to be active

cboston
  • 482
  • 4
  • 10
1

I know this is very old, but I recently ran in to this problem and did some hunting into what was causing it. I hope this helps someone.

It was very hard to determine the issue, because when I inspected the elements, it seemed to be just blank space.

In the end, the problem was caused by the hosted component within the router outlet, namely a paragraph tag

which contained a margin-top. I set the margin-top of p tags to 0 and the issue vanished.

I only found this due to the comments above stating line height 0 fixed the issue. but it was just a margin from a child element pushing the page down (strangely).

user12644709
  • 11
  • 1