CODEWITHSUNDEEP
htmlangularflexboxangular-flex-layout
Steven Scott
Steven Scott

Reputation: 11250

Angular Flex cannot put items on the same line, Angular 8.2.1 and Flex-Layout 8.0.0.beta 26

I am trying to align my boxes on one line, but allow wrapping and moving to column mode when the screen size is a small phone display.

I am trying to get:

Wins Losses Ties Points

as the screen shrinks:

Wins Losses Ties Points

HTML

<div fxLayout="row wrap">
    <div>Wins</div>
    <div>Losses</div>
    <div>Ties</div>
    <div>Points</div>
</div>

<div>
    <div *ngIf="(TeamStandings$ | async) as Data; else loading">
        <div fxLayout="row wrap" fxLayoutAlign="space-around center" fxLayout.xs="column">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </div>
    <!-- While data is being returned via Observable, this is shown -->
    <ng-template #loading>
        Getting Data...
    </ng-template>
</div>

This still gives:

Wins
Losses
Ties
Points
1
2
3

This makes me wonder if the flex-layout module is working, but it is included in my app.module.ts

import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';

import { MaterialModule } from './material/material.module';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        AppRoutingModule,
        BrowserModule,
        BrowserAnimationsModule,
        FlexLayoutModule,
        MaterialModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Each of the sls-number-box simply show a title in a formatted box. However, these remain on individual lines regardless of the screen resolution.

Wins
Losses
Ties
Points

The blocks always show as if they are in a column, and never scroll up to be on the same row regardless of screen size.

The css for the number box has a set width and height of 100px. This can be removed as well if there is a way to size the block inside the flex layout as well. Note that if I remove the width and height from the CSS, then the boxes to size out to the available width, so it does appear that the flex-layout is working somewhat.

Upvotes: 1

Views: 3411

Answers (2)

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve expected result, use below css for the child div to inline-block elements

.test div{
  display: inline-block
}
<div>
        <div class="test">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </div>

Working code for reference - https://stackblitz.com/edit/angular-jkdjgv?file=src/app/app.component.html

Upvotes: 2

Krenom
Krenom

Reputation: 2108

The way the flex layouts work (someone feel free to correct me if I'm wrong) is that, for example, your fxLayout="row wrap" will only work on direct child elements.

Right now, you have 

<div> fxLayout="row wrap">
  <div>
    ...
  </div>
</div>

Only that one div (two once you include your loading ng-template) will get put onto the row.

Something like this should otherwise work:

<div fxLayout="row wrap">
  <div>Wins</div>
  <div>Losses</div>
  <div>Ties</div>
  <div>Points</div>
</div>

This would put each child div within the scope of the row flex layout, but this is not what you actually have. You need to remove that inner div (move the *ngIf to the outer div?) so that the components are direct children of the controlling flex. OR, add the same fxLayout directive to that child div so THAT div is a row layout...

Upvotes: 0

Related Questions