Flex-layout: Breakpoints are not working properly in ipad portrait view

[GGSMNandathilaka]

Following is the component's div structure. In chrome developer mode, this works properly for ipad portrait view (768 x 1024). But it is not working in a proper manner in ipad (native). I am using "@angular/flex-layout": "^2.0.0-beta.4"

<div class="flex-container"
         *ngIf="data && data.length > 0" style="width: 100%">
      <div *ngFor="let result of data " (click)="onSelect($event, result.bookingID)">
        <div fxFlex [fxLayout.gt-sm]="'row'" [fxLayout]="'column'" [fxLayoutAlign]="'space-around'"
             [class]="'pad-10 card-space'">
          <div fxFlex>
            <div [fxLayout]="'row'" class="tc-searh-flex-result">
              <div fxFlex="20" [fxLayoutAlign]="'start center'">
                <div>Div 1</div>
              </div>
              <div fxFlex="20" [fxLayout]="'direction'" [fxLayoutAlign]="'start center'" fxHide.sm fxHide.xs>
                <div [fxLayout]="'column'">
                  <div>Div 2</div>
                </div>
              </div>
              <div fxFlex="20" [fxLayoutAlign]="'start center'">
                <div [fxLayout]="'column'">
                  <div>Div 3</div>
                  <div>Div 4</div>
                </div>
              </div>
              <div fxFlex="40" [fxLayoutAlign]="'start center'">
                <div [fxLayout]="'column'">
                  <div>Div 5</div>
                  <div>Div 6</div>
                </div>
              </div>
              <div fxFlex="20" [fxLayout]="'direction'" [fxLayoutAlign]="'start center'" fxHide.gt-sm>
                <div>Div 7</div>
              </div>
            </div>
          </div>
          <div fxFlex>
            <div [fxLayout]="'row'" class="tc-searh-flex-result">
              <div fxFlex="20" [fxLayout]="'direction'" [fxLayoutAlign]="'start center'" fxHide.gt-sm>
                <div>Div 8</div>
              </div>
              <div fxFlex="40" [fxLayoutAlign]="'start center'">
                <div>Div 9</div>
              </div>
              <div fxFlex="20" [fxLayout]="'direction'" [fxLayoutAlign]="'start center'" fxHide.sm fxHide.xs>
                <div [fxLayout]="'column'" class="tc-set-width">
                  <div>Div 10</div>
                  <div>Div 11</div>
                </div>
              </div>
              <div fxFlex="40" [fxLayoutAlign]="'end center'">
                <div>Div 12</div>
              </div>
            </div>
          </div>
          <div [fxLayout]="'row'" [fxLayoutAlign]="'end end'">
            <div>Div 13</div>
          </div>
        </div>
      </div>
    </div>

[mackelito]

Please recreate the issue:
https://plnkr.co/edit/h8hzyoEyqdCXmTBA7DfK?p=preview

[GGSMNandathilaka]

I have recreated the issue : https://plnkr.co/edit/9mbM2Wx8x2qXpD3y4ilX?p=preview

I have checked this example with chrome browser in windows 10(checked in developer mode for ipad - 768 x 1024 resolution) & ipad pro device (ios 10.2.1). Following I have attached the screen shots in those 2 scenarios. (both landscape and portrait view of ipad)

1. Chrome browser in windows 10

_Landscape_

_Poratrait_

2. Ipad pro

_Landscape_

_Portrait_

I have used 'gt-sm' break point. in the windows 10 chrome browser this break point works properly as the above. But in the ipad pro it didn't work. And also I have tried with samsung galaxy mobile phone. Also this break point didn't work in that scenario.

[mackelito]

I´ll take a look and see if I find anything :)
Note: Please update the url. Right now it´s pointing to github ;)

[mackelito]

iPad Pro Landscape = 1024px in width.
So by setting gt-sm ('screen and (min-width: 960px)') you are telling that if width is 960 or more it should have the row layout correct?

I might be misunderstanding your isssue but what happens if you use
<div fxFlex [fxLayout.gt-md]="'row'" [fxLayout]="'column'">
instead?

[GGSMNandathilaka]

Thanks for your support :)
This is the link for the project : https://embed.plnkr.co/9mbM2Wx8x2qXpD3y4ilX/

"So by setting gt-sm ('screen and (min-width: 960px)') you are telling that if width is 960 or more it should have the row layout correct?"
Yes

I will try the solution which you have suggested and will inform

[ThomasBurleson]

General discussion and how-to questions should be posted to the community forum areas:

• Google Groups
• Gitter Channel - note this will be available soon...

Closing this issue as 'invalid'. Thank you.

[ThomasBurleson]

@GGSMNandathilaka - Careful when you use column as the outer wrapper layout. Only use fxLayout=column when absolutely necessary.

Safari Snapshot:

Demo: Plunkr for ^

[angular-automatic-lock-bot[bot]]

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._}