Контент-контейнер выглядит маленьким - PullRequest
Новая
       16

Контент-контейнер выглядит маленьким

0 голосов
/ 06 марта 2020

Я создаю новое приложение angular, я использую руководство vmware-clarity , но мой navbar и вообще content-container он маленький и оставляет огромный пустое пространство внизу

content-container

на данный момент это мой код:

Главный app.component. html 

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

Горизонтальная навигационная панель (эта выше) 

<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>

Вертикальная панель навигации 

<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>

1 Ответ

0 голосов
/ 31 марта 2020

Это, вероятно, связано с тем, что Clarity использует необычно большой: root размер шрифта 24px.

Итак, если ваш: root размер шрифта меньше (как должно быть, и вероятно, так оно и будет).

Решение: если вы согласны с этим, установите: root размер шрифта, который вы можете найти или объявить в ваших глобальных (-ых) css файл, до 24px, например: 

:root { font-size: 24px }
...