content-container looks small

Question

I'm creating a new angular app, I'm using vmware-clarity guide to do it, but my navbar and in general the content-container it's small and leaves a huge white space in the bottom

at the moment this is my code:

Main app.component.html

<div class="main-container">
    <app-navbar></app-navbar>
    <router-outlet></router-outlet>
</div>

Horizontal navbar(this one is the above one)

<header class="header header-1">
    <div class="branding">
        <a href="..." class="nav-link">
            <span class="clr-icon resumeLogo"></span>
            <span class="title">Ricardo's Resume</span>
        </a>
    </div>
    <div class="header-nav">
        <a href="..." class="active nav-link">
            <span class="nav-text">
                About
            </span> 
        </a>
        <a href="..." class="nav-link">
            <span class="nav-text">
                Personal Information
            </span>
        </a>
        <a href="..." class="nav-link">
            <span class="nav-text">
                 Skils
            </span> 
        </a>
        <a href="..." class="nav-link">
            <span class="nav-text">
                 Work Experience
            </span>
        </a>
    </div>
    <div class="header-actions">
        <a href="..." class="nav-link nav-icon" aria-label="settings">
            <clr-icon shape="cog"></clr-icon>
        </a>
    </div>
</header>

Vertical navbar

<div class="content-container" style="height: 100%;">
    <clr-vertical-nav [clrVerticalNavCollapsible]="true" 
        [(clrVerticalNavCollapsed)]="collapsed">
        <a clrVerticalNavLink routerLink="./normal" 
        routerLinkActive="active">
            <clr-icon clrVerticalNavIcon shape="user"></clr-icon>
                Normal
        </a>
        <a clrVerticalNavLink routerLink="./electric" 
        routerLinkActive="active">
            <clr-icon clrVerticalNavIcon shape="bolt"></clr-icon>
                Electric
        </a>
        <a clrVerticalNavLink routerLink="./poison" 
        routerLinkActive="active">
            <clr-icon clrVerticalNavIcon shape="sad-face"></clr-icon>
                Poison
        </a>
        <a clrVerticalNavLink routerLink="./grass" 
        routerLinkActive="active">
            <clr-icon clrVerticalNavIcon shape="bug"></clr-icon>
                Grass
        </a>
        <a clrVerticalNavLink routerLink="./fighting" 
        routerLinkActive="active">
            <clr-icon clrVerticalNavIcon shape="shield"></clr-icon>
                Fighting
        </a>
        <a clrVerticalNavLink routerLink="./credit" 
        routerLinkActive="active">
            <clr-icon clrVerticalNavIcon shape="certificate"></clr-icon>
                Credit
        </a>
    </clr-vertical-nav>
    <div class="content-area">
        <router-outlet></router-outlet>
    </div>
</div>

You seem to be missing main-container and header - clarity.design/documentation/vertical-nav/basic-structure/… — Wand Maker
@WandMaker I edited the question, I had them but in the app.component, and also I have another navbar (a horizontal one) in another component, there's where I have the header — Ricardo Sanchez Santos
I used your app.component.html and app-navbar in stackblitz clarity - I don't see the issue. — Wand Maker

António Silva António Silva · Accepted Answer · 2020-03-31T08:56:19

This is probably related to the fact that Clarity uses an unusually large :root font-size of 24px.

So, if your :root font-size is smaller (as it should and probably is) it will show as way too small.

Solution: if you're OK with it, set your :root font-size, that you may find or declare on your global (s)css file, to 24px, like this:

:root { font-size: 24px }

content-container looks small

1 Answers