https://i.sstatic.net/S1gIH.jpg
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?
https://i.sstatic.net/gJBLA.pngTo 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. https://i.sstatic.net/Y5r98.png
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.
When hovering, I want to achieve an effect that looks similar to the display below: To view my website, click here The relevant code is shown below with the !important attributes removed: .cta-button-menu, .cta-button-menu::before { transitio ...
I've been trying to align my "field labels" in the center of their respective text fields without much success so far. To achieve this, I resorted to using tables but that didn't quite do the trick. Currently, I'm experimenting with CSS prop ...
Whenever I open gulp, I encounter an error related to minifying css and js files using gulp tasks. Despite my efforts to find a solution, the problem remains unresolved. Error Message: assert.js:374 throw err; ^ AssertionError [ERR_ASSERTION]: Task fu ...
I'm working on a project that involves using multiple templates, but I've run into issues with conflicting CSS links from different templates. I want to ensure that the CSS link from one template only affects a specific HTML card without impactin ...
For my personal project, I am incorporating Radix components alongside radix-ui/colors. However, when attempting to import color variables into the CSS Module, I encountered an error. It seems that using the :root selector in the _app file is necessary, as ...
Looking to style a webpage with CSS to achieve this particular layout: https://i.sstatic.net/K3x0A.png The objective is to make the page responsive where the red and blue columns (left and right) have fixed widths. The center column should be collapsible ...
I am currently working on customizing the navigation bar for my website. My navbar consists of five elements, and I want to make an element appear darker when it is clicked. Here's what I have attempted so far: Utilizing jQuery to modify the ac ...
I am working on a project where I need to organize multiple JSON objects into an array based on their date data, with the date field serving as the key. ...
I designed a Grid container with 2 Grid columns, each containing 3 elements. However, I am facing an issue where the last element of each column is not appearing at the bottom as intended. What could be causing this problem? For reference, you can view th ...
Currently, I am developing an Angular 2 application that utilizes the ng2-slugify package. However, I have encountered an issue where it cannot locate one of the required slugify files, specifically "charmaps.js", even though it is stored in the same direc ...
After successfully implementing the ngx-ui-loader and setting the NgxUiLoaderHttpModule for all HTTP requests in my project, everything is working fine. However, I have encountered an issue on certain routes where multiple HTTP requests are being executed ...
I recently started using a Bootstrap dashboard template created by Creative Tim. I am attempting to incorporate a dropdown list into a table cell, following the standard Bootstrap format: <div class="btn-group"> <button type="button" class="b ...
Looking for a demonstration on how to effectively utilize FormArray with a Tree Structure? I am currently working on implementing inline editing for a hierarchical system Although I have managed to make it functional for the initial level, I am facing ch ...
I am looking to implement a full-screen indeterminate progress bar that overlays all screen elements. Here is my specific use case: When a user fills out a form, including an email field, the email id is checked against a database via ajax. While waiting ...
Looking for assistance with a pipe issue. I've created the following custom SafeHtmlPipe: import { DomSanitizer } from '@angular/platform-browser'; import { Pipe, PipeTransform, SecurityContext } from '@angular/core'; @Pipe({ nam ...
When defining an input for a component like this: @Input() person: Person, some encountered the error message saying, "property 'person' has no initializer and is not definitely assigned in the constructor" even though the Person model has been i ...
Experimenting with creating a seamless 'single-page' experience, I've managed to achieve this by implementing an event listener in jQuery for menu link clicks. This triggers the replacement of the existing content in my main div with an HTML ...
Hey there, I'm a beginner in learning React and I'm encountering an issue with my popup modal component. Even after showing the modal, I can still interact with and click on the main UI elements. Can anyone assist me with this problem? https://i ...
Working with Angular 2's ngModel directive involves variables and functions, such as: <input [ngModel]="myVar" (ngModelChange)="myFunc($event)" /> I am interested in using BehaviorSubjects instead of variables and functions: ...
I'm currently working on an application using Material-UI in conjunction with styled-components. I am faced with the challenge of passing a ref down to the root <button> node that is created by Material-UI. Material-UI provides a buttonRef prop ...