CODEWITHSUNDEEP
cssangularangular-material
Akrem Hammami
Akrem Hammami

Reputation: 153

Floating toolbar in left Angular

1 Im using angular material toolbar , i want to float a span inside the toolbar in left , i tried the css float left and it doesn't work anyhelp please

<mat-toolbar>

        <span>left</span>
        <span style="text-align: right;">  right </span>

</mat-toolbar>

Upvotes: 0

Views: 905

Answers (2)

Arun kumar
Arun kumar

Reputation: 160

If you are familiar with Flex Layout you can include Flex Layout. For that the code goes like this : 

<mat-toolbar fxLayoutAlign="start center" fxFlexFill>
<div class="branding">
    <div class="logo">Left</div>
</div>
<div fxFlex>
    <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="end center"> Right</div>
</div></mat-toolbar>

Upvotes: 1

youri
youri

Reputation: 1160

The following code should do what you want:

<mat-toolbar>
  <div style="text-align: right; width:100%">
    <span style="float:left;">left</span>
    <span>right </span>
  </div>
</mat-toolbar>

In your code text-align: right; is useless because your span fit the content.

Upvotes: 0

Related Questions