flex-layout within material-toolbar

5
votes

I'm currently facing a problem with layouting Angular2's material module using flex layouts.

As you're going to see in the example below as well as the attached live version, Angular2's toolbar module seems not to allow flex layouts being placed within an mat-toolbar

<mat-toolbar color="primary">

    <div fxLayout="row" fxLayoutAlign="end">
        <a mat-button fxFlex="auto">Item 1</a>
        <a mat-button fxFlex="auto">Item 2</a>
        <a mat-button fxFlex="auto">Item 3</a>
        <a mat-button fxFlex="auto">Item 4</a>
    </div>

</mat-toolbar>

<div fxLayout="row" fxLayoutAlign="end">
    <a mat-button>Item 1</a>
    <a mat-button>Item 2</a>
    <a mat-button>Item 3</a>
    <a mat-button>Item 4</a>
</div>

Live Example

Editor Version

What I want to achieve is a placement of the buttons aligned on the right side. Outside of mat-toolbar everything works like a charm. Is there anything I'm missing or is that a bug which is rooted in material being still beta?

2
angularangular-materialangular-flex-layout

2 Answers

8
votes

Oh I'm pretty sure it works, don't worry :)

Simply add fxFlex to your div containing all of your items.

Your issue is that the div isn't taking all the space, making you think it doesn't work.

Also, using the fxFlex property makes your elements take all the width they can, so use it only when a component should take all the remaining space.

Do you want a working blitz or do you want to try it and discover by yourself ?

4
votes

The problem is a misconception about fxLayoutAlign. It just aligns the content within the container and does not affect the position of the container itself. In your case, the position of the div containing all the links is not affected by the fxLayoutAlign attribute, but only the positioning of the links within the div.

<mat-toolbar color="primary">
    <span>Nav</span>
    <div fxLayout="row" fxLayoutAlign="end">
        <a mat-button fxFlex="auto">Item 1</a>
        <a mat-button fxFlex="auto">Item 2</a>
        <a mat-button fxFlex="auto">Item 3</a>
        <a mat-button fxFlex="auto">Item 4</a>
    </div>

</mat-toolbar>

Instead, you could put something in between the elements of the right and the left that uses up all the remaining space of the container:

<mat-toolbar color="primary">
    <span>Navi</span>
    <span fxFlex></span>
    <a mat-button>Item 1</a>
    <a mat-button>Item 2</a>
    <a mat-button>Item 3</a>
    <a mat-button>Item 4</a>
</mat-toolbar>