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 as 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)
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:
0 comments:
Post a Comment