CODEWITHSUNDEEP
cssangularangular6angular-material-6mat-stepper
ananya
ananya

Reputation: 1041

How to keep mat-horizontal-stepper to center of page

enter image description hereI am using Angular 6 mat-horizontal-stepper. I want to give some specific width to it and want to keep it in center of page. For mat-horizontal-content-container i am able to keep it in center 

.mat-horizontal-content-container 
    text-align: center;
    overflow: hidden;
    padding: 0;

But how to keep the header to center of page.I am trying this but it is not working.

.mat-stepper-label-position-bottom .mat-horizontal-stepper-header-container 
    width: fit-content !important;
    align-items: center;

Can anyone please help me with this.

Upvotes: 1

Views: 6268

Answers (4)

ifiora
ifiora

Reputation: 9

You can override Material Component's styles by adding the style you want in your project's main stylesheet (In my case src/style.css). There you can just add:

.mat-horizontal-stepper-header-container {
    justify-content: center;
}

This is because styles that you add on your Angular Component wont affect child components as per the Angular Default Style Encapsulation.

You could also override the default encapsulation in your component, by setting the component's encapsulation property to "None". Source: https://docs.angular.lat/api/core/ViewEncapsulation

I haven't tested this last method on Material Angular components though.

Upvotes: 0

sakshi
sakshi

Reputation: 1

In your component.html:

<div class="stepperContainer">
<mat-horizontal-stepper #stepper>
   your stepper content will go here
</mat-horizontal-stepper>

In your component.css :

.stepperContainer{
width: fit-content;
margin: 0 auto;
}

This will align the stepper to the center.

Upvotes: 0

Unacorn
Unacorn

Reputation: 155

You just need to also add: margin: 0 auto.

.mat-stepper-label-position-bottom .mat-horizontal-stepper-header-container {
    width: fit-content;
    margin: 0 auto;
}

Upvotes: 5

Vaibhav Phutane
Vaibhav Phutane

Reputation: 52

Try with deep

  /deep/.mat-horizontal-content-container {
        text-align: center;
        overflow: hidden;
        padding: 0;
    }

As deep will be deprecate soon alternative approach to write your style in global css file like in style.css

Upvotes: -1

Related Questions