CODEWITHSUNDEEP
javascripthtmlcssangularangular-ui-router
denisiulian
denisiulian

Reputation: 273

Angular router-outlet chilld doesn't take all width

I have a router outlet in a component. The child component doesn't take the whole width. I tried to give to the child's div width:100%, min-width:100%, also with !important, but it's not working. How can I force the child's div to take the whole width available? Parent HTML:

<div fxLayout="column" fxLayoutAlign="space-between stretch">
    <div>
          ...
    </div>

    <div fxLayout="row" fxFlexFill>
        <div class="navbar" fxLayout="column">
        </div>
        <div class="mainDiv" fxFlex>
            <router-outlet></router-outlet>
        </div>
    </div>

    <div fxLayoutAlign="end"></div>
</div>

Parent CSS:

.navbar {
    padding-top: 40px;
    padding-right: 80px;
    border-top: none;
}

.mainDiv {
    width: 100%;
    border-top: none;
}

Child CSS:

<div class="container">...</div>

Upvotes: 2

Views: 1899

Answers (1)

Bounguicha Khmayes
Bounguicha Khmayes

Reputation: 41

Try set the router-outlet inside a div without using flex:

<div style="width: 100%;height: 100%">
<router-outlet ></router-outlet>
  </div>

Upvotes: 3

Related Questions