Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    samin-safaei
    @samin-safaei

    Hello every one. I had an issue to get scroll-able content inside flex box:

    <div fxFlexFill fxLayout="row" fxLayoutAlign="start stretch"style="overFlow: auto;">
      <div fxFlex fxLayout="column">
        <div fxFlexFill fxLayout="row" class="main-content" style="overFlow: auto; background-color: #888;">
          <div fxFlex fxLayout="row wrap" fxLayoutGap="5px grid">
            <mat-card *ngFor="let item of contentItems" fxFlex="25">
              <mat-card-header>
                <div mat-card-avatar class="example-header-image"></div>
                <mat-card-title>Shiba Inu</mat-card-title>
                <mat-card-subtitle>Dog Breed</mat-card-subtitle>
              </mat-card-header>
              <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
              <mat-card-content>
                {{item.name}}
              </mat-card-content>
              <mat-card-actions>
                <button mat-icon-button mat-raised-button color="primary">
                  <mat-icon>edit</mat-icon>
                </button>
                <button mat-icon-button mat-raised-button color="warn">
                  <mat-icon>more_horiz</mat-icon>
                </button>
              </mat-card-actions>
            </mat-card>
          </div>
        </div>
      </div>
      <div fxFlex="35" >
        <div fxFlexFill fxLayout="column" fxLayoutAlign="start stretch" >
          <div fxFlex fxLayout="row" fxLayoutAlign="start start" class="main-content" style="overFlow: auto; ; background-color: blue;">
            <div fxFlex>
              <mat-card *ngFor="let item of contentItems">
                {{item.name}}
              </mat-card>
            </div>
          </div>
        </div>
      </div>
    </div>

    I can't get two main-content divs to have vertical scroll-able content inside parent. The main issue is I don't know how to constraint height to fill parent (when parent is suppose to fill the remaining area).

    Also I had another issue with dynamic flex size. I wanted the main area to get bigger when changing flex size. The first main-content div doesn't seem to change size.
    Both issues are available in this stackblitz

    frostbytedata
    @frostbytedata
    Anyone got a working example for the latest way to use MediaChange?
    stherrienaspnet
    @stherrienaspnet
    Hello, how can i make sure center div 'green color' is not growing with it's content?
        <div fxLayout="row" style="height: 300px">
            <div fxFlex="250px" style="background-color: blue">left</div>
            <div fxFlex style="background-color: green">
                    <mat-tab-group (selectedIndexChange) = onSelectedIndexChange($event) (selectedTabChange)="onSelectedTabChange($event)">
                        <mat-tab *ngFor="let strategy of strategies; let index = index" [label]="strategy.name">
                            Contents for {{strategy.name}} tab
                        </mat-tab>
                    </mat-tab-group>
            </div>
            <div fxFlex="250px" style="background-color: yellow">right</div>
        </div>
    stherrienaspnet
    @stherrienaspnet
    can we block flex from grow horizontaly with its content?
    samin-safaei
    @samin-safaei
    @stherrienaspnet you should first use some flexfills outside to limit the width and then you should use overflow hidden on the parent of mat-tab-group. Here's the working stackblitz link
    Albert Montagut Casero
    @AlbertMontagutCasero
    when i update an array? all my *ngfor that iterate this array are updated?
    Dj-jom2x
    @Dj-jom2x
    @AlbertMontagutCasero yes
    when something changes.. its like chain.. everyone related to that.. gets updated..
    Albert Montagut Casero
    @AlbertMontagutCasero
    @Dj-jom2x there is any way to prvent update?
    samin-safaei
    @samin-safaei
    @AlbertMontagutCasero I would suggest using 2 arrays one which is connected to ngFor and one which gets updated. However if you have to prevent updates you can use trackBy function. Check this answer.
    Albert Montagut Casero
    @AlbertMontagutCasero
    hey, is there any way to get a reference to the selector of a component?
    image.png
    samin-safaei
    @samin-safaei
    @AlbertMontagutCasero you can use ViewChild to get a reference of a component in controller:
    @Component({
      selector: 'app-root',
      template: '<color-sample [color]="primary" #primaryColorSample>
    </color-sample>'
    })
    export class AppComponent {
    @ViewChild(ColorSampleComponent)
    primarySampleComponent: ColorSampleComponent;
    .....
    }
    Albert Montagut Casero
    @AlbertMontagutCasero
    @samin-safaei but i need to get the tag of the element itself
    samin-safaei
    @samin-safaei
    @AlbertMontagutCasero you can access native element using viewchild, elementRef and nativeElement:
    import { Component,
             ViewChild,
             AfterViewInit,
             ElementRef } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      template: '<color-sample [color]="primary" #primaryColorSample>
    </color-sample>'
    })
    export class AppComponent  implements AfterViewInit {
    @ViewChild('primaryColorSample')
      primarySampleComponent: ElementRef;
      ngAfterViewInit() {
        console.log('nativeElement:', this.primarySampleComponent.nativeElement);
      }
    }
    help-Got
    @help-Got
    hello everybody
    I start for first time with Angular and by coincidence with Flex
    can somebody just give me a trigger how to start a new project with Flex?
    only the first steps. Some clear tutorial? I have been looking in the web but can't find something
    samin-safaei
    @samin-safaei
    @help-Got Here is a stackblitz of seed project for angular material and flex-layout. And here is a tutorial for angular flex-layout.
    Ephraim Khantsis
    @doom777
    Hey, is there any integration with cdkVirtualScroller?
    Michael Prentice
    @Splaktar
    @doom777 with @angular/flex-layout? Not that I’m aware of. None of the CDK components depend on @angular/flex-layout
    Ephraim Khantsis
    @doom777
    how about the other way around
    Miguel Franken
    @MiguelFranken
    Bildschirmfoto 2019-09-04 um 13.32.20.png
    Hey guys. I’m having some problems with the gap size.
    <div fxLayout="row wrap" fxLayoutGap="20px" fxLayoutAlign="space-between">
      <ng-container *ngFor="let _ of [1,2,3,4,5,6]">
        <app-card fxFlex="0 1 calc(33.3% - 20px)"></app-card>
      </ng-container>
    </div>
    Why is the gap size not applied correctly here?
    vikas kumar
    @vikrw
    hello guys,
    flex layout is not working with angular 8, flex layout version is 8.0.0-beta.27 and angular version is 8.2, i have imported flex layout in app.module.ts. html is
    <div fxLayout="row" fxLayoutAlign="center center">
    pls help
    i want to centrally align a mat-card with this div as parent
    Michael Prentice
    @Splaktar
    @vikrw what does “not working” mean? you aren’t seeing components laid out properly? Do you have a more complete example or a StackBlitz reproduction?
    Jay
    @Web2Integrators
    does angular flex layout supports css grid?
    Dave Bush
    @DaveMBush
    @MiguelFranken You have a 20px gap between card 3 and 4. If your array that is currently 6 items is actually variable, you are going to end up needing 3 trailing items anyhow to get this to always display as you have in mind so I would recommend adding them. This items can all be 1px high and visible: none. This will fix the current layout as well as any future layout.
    Jason Yeomans
    @YeomansIII
    Any reason MatchMedia is now hidden and a ɵMatchMedia is exported?
    Michael Prentice
    @Splaktar
    Emily Nguyen
    @emsnguyen
    Hi guys, I have this code snippet: <div fxLayout="row inline">
    <div fxFlex="33%">
    .... </div>
    <div fxFlex="33%">
    ... </div>
    <div fxFlex="33%">
    ... </div>
    </div>
    why isn't all divs displayed in oneline only?
    *why aren't all divs displayed on one line only?
    Michael Prentice
    @Splaktar
    @emsnguyen do you have a StackBlitz repo? What version of Flex Layout?
    Do you have any other styles applied to those divs or the container?
    pilouk
    @pilouk
    Hey !
    I have some problem with Safari and samsung internet
    fxFlex with column doesnt seem to work properly
    image.png
    @angular/flex-layout": "^8.0.0-beta.27
    Angualr 8
    everythign working fine in Chrome,firefox edge
    Michael Prentice
    @Splaktar

    @pilouk It’s likely a bug or known issue in Safari and Samsung. Sometimes this happens if the items don’t have a height that the browser can figure out. An alternative is to use row and fxFlex=“100” (if you only want 1 item per row).

    Here’s a useful resource: https://github.com/philipwalton/flexbugs#flexbugs