Calcite Web: Calcite Grid System Column 24 Width Adjustment

arahman_mdmajid — Wed, 02 Feb 2022 07:29:13 GMT

I am using Calcite web for creating a navbar, and my code goes as follows.

<div class="grid-container" style="all: unset;"> <div class="column-24">  <div class="tablet-hide">  <img class="esri-logo"> <span class="top-nav-title">Title Here</span>  <nav class="top-nav-list" role="navigation" aria-labelledby="topnav"> <a class="top-nav-link" (click)="showTool1()">Tool 1</a> <a class="top-nav-link" (click)="showTool2()">Tool 2</a> <a class="top-nav-link" (click)="showTool3()">Tool 3</a> </nav>  <nav class="top-nav-list right" role="navigation" aria-labelledby="topnav"> <a class="top-nav-link icon-ui-user" href="#">Sign In</a> <a class="btn btn-clear" href="#" style="margin-right: 5px; margin-top: 10px;">Sign Up</a> </nav> </div> </div> </div>

The resulting base is as follows.

As you can see (sorry for the small picture), the sign-in and sign-up options appear in the middle of the page and not in the left-hand corner (dir is equal to RTL for Arabic). After inspecting the element, it shows that the width for column 24 class property is set as shown below,

.column-24 { width: 1440px; max-width: 96vw; }

If I set the width to 100%, it moves to the maximum width, i.e., 1843px, and not to the corner of the page.

How can we expand it further and move it to the end of the page and make it adjustable as the page resizes?

topic Calcite Web: Calcite Grid System Column 24 Width Adjustment in Calcite Design System Questions

Calcite Web: Calcite Grid System Column 24 Width Adjustment