Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

fxLayoutAlign center does not set align-items: center;

See original GitHub issue

Bug Report

What is the expected behavior?

fxLayoutAlign=“center” should set “align-items: center; align-content: center”

What is the current behavior?

No: justify-content: center No: align-items: center; align-content: center

What are the steps to reproduce?

<h2 mat-dialog-title fxLayout="row" fxLayoutAlign="center">
  <span>{{title}}</span>
  <span fxFlex="auto"></span>
  <mat-icon *ngIf="titleIcon" [svgIcon]="titleIcon" [color]="titleIconColor"></mat-icon>
</h2>

What is the use-case or motivation for changing an existing behavior?

Feature works differently than the documentation

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/core": "~11.2.0",
"@angular/flex-layout": "^11.0.0-beta.33",

Is there anything else we should know?

Issue Analytics

State:
Created 3 years ago
Comments:9 (2 by maintainers)

Top GitHub Comments

1reaction

mackelitocommented, Mar 4, 2021

@spiotr12 your issue is the fxFlex=“auto” property… it will force the other elements to the sides @gajevski Are you sure you have imported the Module? Take a look at the element and see if there are inline styles added or not…

Here’s stackblitz that show’s that it does work 😃 Also added some other examples 😉

https://stackblitz.com/edit/angular-cmnwmx-vr6uv7?file=src%2Fapp%2Ftoolbar-basic-example.html

0reactions

angular-automatic-lock-bot[bot]commented, Oct 16, 2021

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Top Results From Across the Web

how to center align item using angular flex layout

First parameter in fxLayoutAlign is for main axis and second is for cross axis. Share.

How to specify not unique object in html? there is no iframe in ...

Hello, Please help with the not unique test objects definition. ... display: flex; place-content: center flex-start; align-items: center;”.

Align Items - Tailwind CSS

Utilities for controlling how flex and grid items are positioned along a ... Use items-center to align items along the center of the...

Angular Flex Layout Align - StackBlitz

fxLayoutAlign ="center center". fxLayoutAlign.lt-sm="center end"> ... name = 'Anyone can you help with Angular 4. Drag and drop';.

Angular Flex-Layout Demos

<div fxLayout="row" fxLayoutAlign="space-around center" >. Layout Fill Using 'fxFill' to ... Layout Gap Using 'fxLayoutGap' to create a grid-like layout.