Aligning items on Mat-Toolbar (left, center, and right)

I created a new toolbar but I am having trouble aligning the elements on the same line in different positions such as left, center, and right.

Is there anyone who can provide guidance on how to achieve this alignment?

In my observation, elements with the label "Align left" are aligned to the left, those labeled "Align center" are aligned at the center, and those labeled "Align right" are aligned to the right.

I would appreciate any help or suggestions. Thank you!

Demo

Code

<mat-sidenav-content fxFlexFill>  
  <mat-toolbar color="primary">
    <mat-toolbar-row>
      <button mat-icon-button (click)="sidenav.toggle()" fxShow="true" fxHide.gt-sm>
        <mat-icon>menu</mat-icon>
      </button>

      <div fxShow="true" fxHide.lt-md>
        <a href="#" mat-button>Align left</a>
        <a href="#" mat-button>Align left</a>
        <a href="#" mat-button>Align center</a>
        <a href="#" mat-button>Align center</a>
        <a href="#" mat-button>Align right</a>
        <a href="#" mat-button>Align right</a>
      </div>
    </mat-toolbar-row>
  </mat-toolbar>
cssangulartypescriptangular-materialmaterial-design

Answer №1

Utilize CSS to make an element expand and fill the available space.

.flexExpand {
    flex: 1 1 auto;
}

Implement the flexExpand utility in your template to create separation between items:

<mat-toolbar>
<mat-toolbar-row>
 <div >
      <a mat-button [routerLink]="'/accounts'"> Accounts </a>
      <a mat-button [routerLink]="'/create-account'"> Create Account </a>
    </div>
    <span class="flexExpand"></span>
    <div >
      <a mat-button [routerLink]="'/logout'"> Logout </a>
    </div>
    <mat-toolbar-row>
</mat-toolbar>

Answer №2

Do you need assistance with something like this ?

<div fxShow="true" fxHide.lt-md fxFlex fxLayout>
  <!-- The menu items below will be hidden on small and extra small screens -->
  <div fxFlex>
     <a href="#" mat-button>Align left</a>
     <a href="#" mat-button>Align left</a>
  </div>
  <div fxFlex fxLayoutAlign="center center">
     <a href="#" mat-button>Align center</a>
     <a href="#" mat-button>Align center</a>
  </div>
  <div fxFlex fxLayoutAlign="flex-end center">
     <a href="#" mat-button>Align right</a>
     <a href="#" mat-button>Align right</a>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The problem with floating labels

I have been attempting to incorporate the floatlabels feature from floatlabels, but I am encountering difficulties in getting it to work properly. Here is the sequence of steps I have taken: Firstly, I include the JS file <script src="js/floatlabels. ...

jqueryhtmlcssforms

Angular2 route-driven themes

Exploring Different Themes for Two Routes: /books and /paintings Seeking a Solution to Include Specific Stylesheet Links in index.html For the /books route, I wish to include: <link rel="stylesheet" href="/assets/css/reading-theme.css" /> And for ...

angular

What is the best way to integrate a template reference variable with ngIf in Angular?

<div *ngIf="true" myHighlight #tRefVar="myHighlight"></div> <div>tRefVar is {{tRefVar.foo}}</div> Despite setting the *ngIf condition to true, I encounter a 'Cannot read property 'foo' of undefined' error. Remov ...

angularangular2-template

The issue arises when trying to apply CSS and minified JavaScript after adding new data in jQuery Mobile

I am having an issue with adding data and displaying it on a list. The problem arises when I add data through AJAX. In the success function, after showing the alert "successfully added", I used location.reload(), which takes me to the homepage (div tag dat ...

jqueryhtmlcssajax

Wrapping a list vertically with ASP.NET using a repeater for generation

I have a repeater that is creating a list of links in no particular order. I want the list to be displayed as follows: -Item1 -Item4 -Item2 -Item5 -Item3 Most solutions I've found require you to know the items in advance and set specific classes for ...

asp.netcsslistxhtmlrepeater

Difficulty filling height with Bootstrap 4 flex-grow

I am in need of creating a layout with a header div at the top (that can be filled with content), a footer div at the bottom, and a middle div with an adaptable height to fill the entire screen. Check out my code below: <div class="container-fluid p-0 ...

htmlcssbootstrap-4

Guide on utilizing TypeScript declarations imported as `* as`

Currently, I am working with react-icons and attempting to import all icon definitions using the syntax import * as Icons from 'react-icons/fi'. However, I am facing a dilemma on how to create a type that must be one of the types exported from Ic ...

reactjstypescript

Some files are missing when performing an npm install for a local package

My project is structured like this: ├── functions/ │ ├── src │ ├── lib │ ├── package.json ├── shared/ │ ├── src │ | ├── index.ts | | ├── interfaces.ts | | └── validator_cl ...

node.jstypescriptnpmnpm-install

Using Typescript to identify the specific subtype of an object within a union type based on the properties it contains

I am trying to create a carousel that displays items of two different types (FirstType, SecondType). The carousel component I am using requires an array as input, so I have declared the items as an array union like this: type FirstType = { a: 'first ...

typescript

What could be causing the value to not be assigned in TypeScript?

I'm currently working on code aimed at generating a string based on the selected value. this.selectedCategory = selectedvalue.name; this.filter = '{category:${this.selectedCategory}}'; The content of this.filter is {category:${this.selecte ...

angulartypescript

Inline display malfunctioning

I am facing an issue while integrating ngTimepicker into my Angular project. It is functioning properly, but I am unable to inline the ngTimepicker inputs with the form input. Check out the plunker here I would like this section of HTML to be displayed in ...

javascripthtmlcssangularjs

Missing Directory Issue Upon Deploying Node.js App on Google App Engine

I have a Node.js web application built using TypeScript and Koa.js that I am looking to deploy on Google App Engine. The code has already been transpiled into JavaScript and is stored locally in the ./dist/src/ directory. Essentially, I only need to depl ...

node.jstypescriptgoogle-app-enginenpm

Exploring the functionality of Protractor testing in combination with Angular 2, focusing

I am currently developing an Angular 2 application and I require some information regarding unit testing with Protractor. Previously, in Angular 1, we were able to check for things like: element(by.css('[ng-click="myFunction()"]')) in our test ...

javascriptangularprotractor

Reduce the size of your CSS files using Gulp through the .pipe method

Is it feasible to incorporate a plugin like clean-css to minify CSS every time a page is refreshed or saved? How can I chain it through pipes to ensure that the minified file ends up in the dist folder? Thank you for any assistance! Presented below is the ...

cssgulpbundling-and-minificationgulp-clean-css

The parameter 'Barable' cannot be assigned to the parameter 'T' as they are not compatible

Could anyone help me understand why this code isn't functioning as intended: class Fooable { foo: string; } class Barable extends Fooable { bar: boolean; } function simplifiedExample<T extends Fooable>(): Array<T> { let list ...

typescriptgenericsinheritance

Having trouble with flickering in rotating card animation in Bootstrap using CSS?

Recently, I worked on a bootstrap website where I implemented a unique feature – a card that flips to show its backside upon hover. You can check out the live website here: Live Site Here's the code snippet for the section with the flipping card: ...

htmlcssanimationbootstrap-4

When the page is scrolled, the div is fixed in place and a class is dynamically added. Some issues may

Greetings everyone, I have a webpage with two floating divs - one is about 360px wide and the other has an auto width. As the page scrolls, the left div is assigned a class that fixes it to the screen, allowing the other div to scroll. This functionality w ...

javascriptjqueryhtmlcss

CSS text links have an oversized click area in Chrome and Safari

It seems like there might be an issue in the CSS code that is causing Chrome and Safari to enlarge the hover areas on text links. This behavior is not occurring in Internet Explorer or Firefox. Any pointers on what could be wrong with the CSS? The mouse cu ...

css

How to retrieve the type of a computed keyof T as a generic type within TypeScript

I am working with two different interfaces: interface PersonRequirements{ user:string, password:string, id:number } export interface Requirement<R> { name: keyof R & string, save: () => any,/* I want this return type to be ...

javascripttypescriptgenerics

The generic parameter fails to meet the specified constraint

When examining the code below, it becomes apparent that an error is expected: The new javascript doesn't satisfy. declare type Type = { 0: [C, D], 1: [2, 2], } type C = { C: number } type D = { D: number } type FirstExtendsSecond<First extend ...

typescript