CODEWITHSUNDEEP
css
nazanin n
nazanin n

Reputation: 131

using RTl in css But the content is in the middle of the page

i am writing an angular admin panel but there is a problem. i used RTL in mu css so it would be a RTL panel but my content now is in the middle of the page what should i do?enter image description here

this is my html code

<app-header ></app-header>


<mat-drawer-container>
    <mat-drawer mode="side" [opened]="sideBarOpen" >
        <app-sidebar></app-sidebar>
    </mat-drawer>
    <mat-drawer-content>
        <router-outlet></router-outlet>
    </mat-drawer-content>
</mat-drawer-container>

<app-footer></app-footer>

this is my css

:host{
    display: flex;
    flex-direction: column;
    height: 100%;
}

mat-drawer{
    width :250px;
}

mat-drawer-container{

height:100% ;
direction: rtl;
position: rtl;
padding: 1em 1em .5em 2em;

}

mat-drawer-content{
direction: ltr;
text-align: ltr;


}

Upvotes: 0

Views: 84

Answers (1)

Mr. Simmons
Mr. Simmons

Reputation: 446

Add position="end" to the mat-drawer

<mat-drawer mode="side" [opened]="sideBarOpen" position="end">
    <app-sidebar></app-sidebar>
</mat-drawer>

Upvotes: 1

Related Questions