Search code examples
vmware-clarity

Clarity Design how to use e.g. .clr-row, only possible inside of content-area?

Maybe this is a basic question, if I copy the below code into a <div class="main-container"></div> the window will show the horizontal scroll, but if the code goes to a <div class="content-area"></div> then I have the expected behavior. 

<div class="clr-row">
    <div class="clr-col-4">
        <span>4</span>
    </div>
    <div class="clr-col-6">
        <span>6</span>
    </div>
    <div class="clr-col-2">
        <span>2</span>
    </div>
</div>

e.g. the .clr-row must be only used inside a content-area ? I'm using Angular 9 with Clarity Design 3.0.0-next.8.

Thank you for any hint.

Solution

  • Yes, you should use clr-row inside of the .content-area container element.

    We disucuss application layout and how it fits with the variaous navigation patterns here: https://v2.clarity.design/app-layout

    But its not explicitly called out to use the layout classes and apply them to elements inside of the content-area.