After applying the following CSS:
mat-step-header{
display: flex ;
justify-content: flex-end ;
}
I am attempting to make this stepper function properly.
I have implemented Angular Material design for a vertical stepper. How can I position the stepper title on the left and content on the right side, similar to the example shown here.
Alternatively, is there a module that can help achieve this layout?
To ensure your mat-step-header is aligned to the right, apply the following flex properties:
mat-step-header{
display: flex ;
justify-content: flex-end ;
}
The solution mentioned above worked perfectly for me with a few adjustments. I utilized mat-side nav and mat-stepper to achieve the design below.
If you are wondering about the missing header, I removed it by adding the following CSS in styles.css
.mat-horizontal-stepper-header-container {
white-space: nowrap;
display: none !important;
align-items: center;
}For replicating this design using the solution provided above, use the HTML code below.
<mat-sidenav-container class="example-container">
<mat-sidenav #sidenav mode="side" opened class="example-sidenav" [fixedInViewport]="options.value.fixed"
[fixedTopGap]="options.value.top">
<mat-nav-list>
<a mat-list-item (click)="move(0)">Contract Essential Details</a>
<a mat-list-item (click)="move(1)">Terms and conditions</a>
<a mat-list-item (click)="move(2)">Lines</a>
<a mat-list-item (click)="move(3)">Commitments</a>
<a mat-list-item (click)="move(4)">Assets</a>
<a mat-list-item (click)="move(5)">License</a>
<a mat-list-item (click)="move(6)">Consumption Chart</a>
<a mat-list-item (click)="move(7)">Renewal</a>
<a mat-list-item (click)="move(8)">Artifacts</a>
<a mat-list-item (click)="move(9)">Version Control</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-horizontal-stepper #stepper [@.disabled]="true">
<mat-step>
<div>
<button mat-raised-button (click)="stepper.reset()" style="float: right;">Reset</button>
<button mat-raised-button matStepperNext style="float: right;">Next</button>
</div>
<h2 mat-dialog-title id="u1469">Contract Essential Details</h2>
<div id="u1475">10% Complete
</div>
<div style="width: 182px;">
<mat-progress-bar value=10></mat-progress-bar>
</div>
</mat-step>
... // Other steps follow here, each with its respective details
</mat-horizontal-stepper>
</mat-sidenav-content>
</mat-sidenav-container>After much effort, I have finally completed my design. Hopefully, it will be beneficial for others as well.
HTML:
<mat-vertical-stepper #stepper [@.disabled]="true">
<mat-step label="Step 1">
<h2> Step 1</h2>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
<mat-step label="Step 2">
Step 2
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
<mat-step label="Step 3">
Step 3
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
<mat-step label="Step 4">
Step 4
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
<mat-step label="Step 5">
Step 5
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
<mat-step label="Step 6">
Step 6
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
</mat-vertical-stepper>
<div >
<ul>
<li class="mytest" [ngClass]="{'active': stepper.selectedIndex == 0}"><a (click)="move(0)">Label 1</a></li>
<li class="mytest" [ngClass]="{'active': stepper.selectedIndex == 1}"><a (click)="move(1)">Label 2</a></li>
<li class="mytest" [ngClass]="{'active': stepper.selectedIndex == 2}"><a (click)="move(2)">Label 3</a></li>
<li class="mytest" [ngClass]="{'active': stepper.selectedIndex == 3}"><a (click)="move(3)">Label 4</a></li>
<li class="mytest" [ngClass]="{'active': stepper.selectedIndex == 4}"><a (click)="move(4)">Label 5</a></li>
<li class="mytest" [ngClass]="{'active': stepper.selectedIndex == 5}"><a (click)="move(5)">Label 6</a></li>
</ul>
</div>
TS:
import { Component, OnInit, ViewChild } from '@angular/core';
import {MatStepper} from '@angular/material';
export class implements OnInit {
isLinear = false;
@ViewChild('stepper') stepper: MatStepper;
constructor(private _formBuilder: FormBuilder) {}
ngOnInit() {
}
move(index: number) {
this.stepper.selectedIndex = index;
}
}
That concludes the project.
Referenced from: https://stackblitz.com/edit/angular-demo-matstepper-move?file=app%2Fdemo%2Fdemo.component.html
When encountering a similar problem, I discovered an alternate approach that proved to be quite straightforward. By utilizing the Horizontal stepper component and adding a float left property to .mat-horizontal-stepper-header-container, along with a float right property to .mat-horizontal-content-container, you can achieve the desired outcome effortlessly.
After trying out this code snippet: <video autoplay playsinline style="width: 100vw; height: 100vh;"></video> <script> navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } }) .then(stream =&g ...
Presenting a catalog of products, showcasing available products along with all related rate plans. Each rate plan includes a toggle button for adding the product + rate plan to the order. Below are the functions used to add and remove items from the order ...
Currently, I have implemented a modal window that appears when a .btn link is clicked. However, I am facing an issue where users can still navigate through links and buttons in the background by pressing the Tab key. This becomes problematic especially fo ...
Recently, I came across a helpful tutorial on how to create a table with a fixed header and scrollable body. You can find it here. While the tutorial worked perfectly for me, I encountered an issue when trying to refresh the webpage and maintain my positio ...
I'm attempting to utilize the Blob function to generate a file from information transmitted via a server call, encoded in base64. The initial file is an Excel spreadsheet with a length of 5,507 bytes. After applying base64 encoding (including newlines ...
I need to customize the background color of my table rows based on the value in the "Category" column. For example: Name Category Subcategory A Paid B C Received D If the Category value is 'Paid', I want the ro ...
I have a parent component that communicates with the server and receives an object: // parent component @Component({ selector : 'node-display', template : ` <router-outlet [node]="node"></router-outlet> ` }) exp ...
After encountering a strange issue not too long ago, I decided to continue my CSS animation experiments with SVG, specifically focusing on colorization. Initially, I thought that applying the animation rules directly to the <g> tag grouping all the ...
Feeling frustrated with a seemingly commonplace issue. Despite the thousands of times it has been asked before, I can't seem to find an answer on Google. I wanted to neatly display my text within one of my cards, but so far I've only achieved th ...
I have three different types of objects: A - FirstName - LastName B - FirstName - LastName - MiddleName C - FirstName My goal is to create a component that can be used to easily create these objects using a simple form where I can input the necessa ...
As I am not a javascript developer, the code I have been given for debugging is somewhat challenging. The issue at hand involves an iOS module where a .js CSS file has been set up and images are loading improperly, resulting in the need for horizontal scro ...
After setting the app.settings as shown below public static get DateFormat(): string { return 'MM/DD/YYYY';} I need to utilize it in one of my HTML templates for a component. This is what I want to achieve. <input [(ngModel)]="Holiday" [dat ...
How do I retrieve the chosen value from a select element? In my select.component.ts file: export class PfSelectComponent implements OnInit { constructor() { } ngOnInit() { } @Input() options : Array<Object>; } Contents of select.compon ...
I am having trouble incorporating an action button in the child_1 component, while the event handler is located in the sub child component, child_2. Here's a snippet of the code: app.component.html (Parent HTML) <div style="text-align:center"> ...
I am currently working on my Vuetify3 project where I need to customize a select dropdown from a library to match the style of Vuetify's select dropdown perfectly. After inspecting Vuetify's select box, I decided to replicate its styles by using ...
In my design, I have a toolbar with flex display and I am trying to center my span element within it. However, I seem to be missing something in the CSS. CSS .toolbar { position: absolute; top: 0; left: 0; right: 0; height: 60px; d ...
In the error message below, it seems that suggestion 1 might be applicable to my situation. My Angular component has a GcUser input, but I have confirmed that it is part of the module (both the component behind the HTML and the user-detail component import ...
Everything seemed to be working fine with my project yesterday, but today I ran into an issue right after installing the ngx-pagination module: ERROR in src/app/views/dashboard/step1/step1.component.ts(1,23): error TS2688: Cannot find type definition ...
I am currently developing a full stack web application using Angular, Node (Express), and mySQL. I am looking to display a different route to the user than the actual one. Is there a way to achieve this? For instance, let's say this is my dashboard pa ...
I am working on an accordion menu that contains lengthy content. To improve user experience, I want to implement a slide effect when the accordion content is opened. Currently, when the first two menu items are opened, the content of the last item is disp ...