Clarity: Improve documentation re: what needs to be a direct child of .main-container and why

Created on 19 Jul 2017 · 9Comments · Source: vmware/clarity

[x] bug
[ ] feature request
[ ] enhancement
There should really be a "i need help" choice here, bug is like I know it's your problem, but it can be I just need some help.. request and enhancement doesn't really fit either.. but i digress.

Expected behavior

Grid not working within content-area.

Actual behavior

Things / UI, things like divs with class of row or container, clr-datagrid, forms.. gets squished in sized. I'm getting a horisontal scrollbar if I tried extending the size of things in content-area

Reproduction of behavior

From https://vmware.github.io/clarity/documentation/navigation I've used the fifth as my working 'template', "5. Subnav as primary navigation and sidenav as secondary navigation".

From index:

<body>
  <app-root></app-root>
</body>

To app-component:

<clr-main-container>
    <mainmenu></mainmenu>
    <router-outlet></router-outlet>
</clr-main-container>

To settings-component:

<nav class="subnav">
    <ul class="nav">
        <li class="nav-item">
         ...
<router-outlet></router-outlet>

To network-component:

  <nav class="sidenav">
      <section class="sidenav-content">
        .....
<router-outlet></router-outlet>

To node-component:

<div class="content-container">
  <router-outlet></router-outlet>
</div>

To (finally) nodelist-component:

<main class="content-area">
     .... here is the problem.
  </main>

Hope you see my problem :) thanks in advanced!

Environment details

[email protected]
angular/[email protected]

Dev has workaround

Source

axhcypod

👍2

Most helpful comment

I got rid off the errors with good ol'

import { ChangeDetectorRef   } from '@angular/core';
.
.
.
constructor(private cdRef: ChangeDetectorRef) {}
.
.
.
class etc.. {
      ngAfterViewChecked() {
          this.cdRef.detectChanges();
       }
}

axhcypod on 9 Aug 2017

👍2

All 9 comments

My issue is maybe the same as https://github.com/vmware/clarity/issues/126 but it's closed and none of the plunkers works. I can't fit it to my structure either..

axhcypod on 19 Jul 2017

@axhcypod
Could you replicate your issue in our Plunkr? It will make it easier for us to diagnose the problem and determine if this is a different issue than #126 .

mathisscott on 19 Jul 2017

👍1

https://plnkr.co/edit/e1O3CI?p=preview

Click try me -> try next level. The red area is the problem.. its just not taking the space..
thanks dude :+1:

axhcypod on 20 Jul 2017

❤1

@axhcypod: The layout uses flexbox. You need to make sure that the .header, .subnav & .content-containerare direct children of the .main-container. In case you are unable to remove the nesting you need to make sure that you add a class .u-main-container to wrap the above elements. Also, the .content-area & the .sidenav are a direct child of the .content-container.

Without this the layout would not work and you will have to add custom styles to make sure that the right elements are marked display: flex by referring to what our layout classes do.

I will keep this open because this is not documented that well and this issue can track that.

cc: @mathisscott

adityarb88 on 21 Jul 2017

👍1

biiig smile

can you show me on plunker? :dancing_men:

--- Edit

Got it working. Had to split into more components, subnav and sidenav in their own ones and pull the main-menu up to the highest lvl.

So in the third lvl i got:

mainmenu /mainmenu
app-subnav /app-subnav
div class="content-container"
app-sidenav /app-sidenav
div class="content-area"
!-- CONTENT --
................................
!-- / CONTENT --
/div

--- Another edit

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.

getting this error when I use [clr-nav-level]="2" and [clr-nav-level]="1" now..
Hmm, removing them removes the error, but removes the responsive menus..

Let me know if theres a fix for this.

FYI

axhcypod on 24 Jul 2017

👍2

I got rid off the errors with good ol'

import { ChangeDetectorRef   } from '@angular/core';
.
.
.
constructor(private cdRef: ChangeDetectorRef) {}
.
.
.
class etc.. {
      ngAfterViewChecked() {
          this.cdRef.detectChanges();
       }
}

axhcypod on 9 Aug 2017

👍2

@axhcypod solution above worked. Thanks!

Igogrek on 9 Aug 2017

In case you'd like a slightly more elegant workaround for this (including #126) when using router-outlet, here's a way to apply a class to the "Host" container created by the router outlet, so that clarity's styles will flow properly. In the below case, the router outlet lives as an immediate child of the <clr-main-container>, and receives the class from the currently loaded component.

@Component({
  selector: 'sub-route',
  templateUrl: './sub-route.component.html'
})
export class SubRouteComponent {

  @HostBinding('class.content-container')
  public showContainerClass = true;

}

<div class="content-area">
  <h1>This is a test</h1>
</div>
<nav class="sidenav">
  <section class="sidenav-content">
    <section class="nav-group">
      <label><a href="">Application Name</a></label>
    </section>
  </section>
</nav>

krotscheck on 31 Oct 2017

@adityarb88 Thanks for the suggestion for using .u-main-container. Is this documented anywhere? If you use quite a bit of nesting in your app this is very useful information.