CODEWITHSUNDEEP
angularangular-material
Andrzej
Andrzej

Reputation: 21

How to display mat-list-items left to right

When using Angular Material mat-nav-list I want the login and logout list items next to each other from left to right. What should I do?

<mat-toolbar color="primary">
    <mat-toolbar-row>
        <span>Custom Toolbar</span>
    </mat-toolbar-row>
    <mat-toolbar-row>
        <mat-icon class="example-icon">favorite</mat-icon>
        <mat-icon class="example-icon">delete</mat-icon>
        <span>User name</span>
        <span class="example-spacer"></span>
            <mat-nav-list>
                <a mat-list-item routerLink="login" >Login</a>
                <a mat-list-item routerLink="login" >Logout</a>
            </mat-nav-list>    
    </mat-toolbar-row>
</mat-toolbar>

Upvotes: 0

Views: 5358

Answers (3)

Awais
Awais

Reputation: 4902

I use angular flex to achieve this layout like as you are also using Angular material so try this

    <div class="iq-actn" fxLayout="row wrap" fxLayout.lt-sm="column" fxLayoutGap="10px" fxLayoutAlign="flex-start center">
     <a fxFlex matRipple>Log In</a>
     <a fxFlex matRipple>Log Out</a>
   </div>

Upvotes: 0

nclarx
nclarx

Reputation: 887

One solution would be to not use mat-nav-list and restructure your HTML as follows and use mat-button for your login and logout links:

<mat-toolbar color="primary">
  <mat-toolbar-row>
      <span>Custom Toolbar</span>
  </mat-toolbar-row>
  <mat-toolbar-row>
    <mat-icon class="example-icon">favorite</mat-icon>
    <mat-icon class="example-icon">delete</mat-icon>
    <span>User name</span>
    <span class="example-spacer"></span>
    <a mat-button routerLink="login">Login</a>
    <a mat-button routerLink="login">Logout</a>
  </mat-toolbar-row>
</mat-toolbar>

The mat-button directive seems to suit what you want better because they will display inline by default. Note the explanation in the Angular Material Docs on mat-button which explains where you should use <button> as opposed to <a>. If you don't intend to navigate away from the page, you should use <button> elements instead.

Adding extra CSS as suggested in Mat-Nav-List horizontal instead of vertical? is fine, but if you want to avoid custom CSS and use Angular Material itself, use mat-button.

Upvotes: 0

bjdose
bjdose

Reputation: 1309

You can add some CSS in order to do it. You can read about Flex CSS here: CSS Flexible Box Layout - Basic Concepts

<mat-toolbar color="primary">
  <mat-toolbar-row>
      <span>Custom Toolbar</span>
  </mat-toolbar-row>
  <mat-toolbar-row>
    <mat-icon class="example-icon">favorite</mat-icon>
    <mat-icon class="example-icon">delete</mat-icon>
    <span>User name</span>
    <span class="example-spacer"></span>
    <mat-nav-list class="my-nav-list">
      <a mat-list-item routerLink="login" >Login</a>
      <a mat-list-item routerLink="login" >Logout</a>
    </mat-nav-list>
  </mat-toolbar-row>
</mat-toolbar>

.my-nav-list {
  display: flex;
  flex-direction: row;
}

Upvotes: 1

Related Questions