Preview needs to be based on fullsize of window.

[junimohano]

The preview height is based on document height not window height.

If height is more than window's height as scroll, the positions of preview is wrong.

Could you fix it ?

[lukasz-galka]

Hi @junimohano, could you give me more info? code example? package.json? maybe link to application or to sources?

Here https://lukasz-galka.github.io/ngx-gallery-demo/ you can find demo for my plugin and there is no problem which you described.

[junimohano]

um.. yes your demo is okay...

I am using flex layout.

my package.json as below,

"dependencies": {
        "@angular/animations": "^4.3.3",
        "@angular/cdk": "^2.0.0-beta.8",
        "@angular/common": "^4.3.3",
        "@angular/compiler": "^4.3.3",
        "@angular/core": "^4.3.3",
        "@angular/flex-layout": "^2.0.0-beta.8",
        "@angular/forms": "^4.3.3",
        "@angular/http": "^4.3.3",
        "@angular/material": "^2.0.0-beta.8",
        "@angular/platform-browser": "^4.3.3",
        "@angular/platform-browser-dynamic": "^4.3.3",
        "@angular/router": "^4.3.3",
        "@ngrx/effects": "^4.0.2",
        "@ngrx/router-store": "^4.0.2",
        "@ngrx/store": "^4.0.2",
        "@ngx-translate/core": "^7.1.0",
        "@ngx-translate/http-loader": "^1.0.1",
        "angular2-jwt": "^0.2.3",
        "angular4-social-login": "^1.0.10",
        "core-js": "^2.5.0",
        "font-awesome": "^4.7.0",
        "hammerjs": "^2.0.8",
        "ngx-gallery": "^1.1.1",
        "rxjs": "^5.4.2",
        "zone.js": "^0.8.16"
    },
    "devDependencies": {
        "@angular/cli": "^1.2.7",
        "@angular/compiler-cli": "^4.3.3",
        "@angular/language-service": "^4.3.3",
        "@ngrx/store-devtools": "^4.0.0",
        "@types/jasmine": "^2.5.53",
        "@types/node": "^8.0.19",
        "codelyzer": "^3.1.2",
        "jasmine-core": "~2.7.0",
        "jasmine-spec-reporter": "^4.1.1",
        "karma": "~1.7.0",
        "karma-chrome-launcher": "^2.2.0",
        "karma-cli": "~1.0.1",
        "karma-coverage-istanbul-reporter": "^1.3.0",
        "karma-jasmine": "~1.1.0",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.1.2",
        "ts-node": "^3.3.0",
        "tslint": "^5.6.0",
        "typescript": "~2.4.2"
    }

[junimohano]

I found one thing that it occured on md-tab.

preview's size is based on width and height of md-tab.

Is there any soluations?

[junimohano]

How to remove this transform? I saw the issues you wrote and follow to remove this transform on chrome developer mode, it works but i don't know how to remove on code.

[lukasz-galka]

You can try with:

.mat-tab-body-content {
    transform: none !important;
}

[junimohano]

I already tried.. but not working.. It seems like they changed style when tab is changed.

[lukasz-galka]

I have created empty project with angular material tabs and my gallery. At the begining there was problem with preview size, but above css solved this issue.

Did you find solution? Could you create demo/github repo with this issue? Do you have this issue on evry tab? Maybe this is because of other material element?

I would like to resolve this issue.

[junimohano]

test project link

I made a repository for you. Can you check this one? Same problem.. I need a full screen of preview. also, preview should cover toolbar as well.

Can you look at it and fix please ?

[lukasz-galka]

Hi @junimohano thanks for test repository. You have to insert styles for .mat-tab-body-content inside file style.css:

/* You can add global styles to this file, and also import other style files */

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
body {
    font-family: 'Roboto', sans-serif;
}

.mat-tab-body-content {
    transform: none !important;
}

In your example you had these styles in app.component.css. Styles defined in component are only for this component, so in output you had

.mat-tab-body-content[_ngcontent-c0] {
    -webkit-transform: none !important;
            transform: none !important;
}

but we need selector without component attribute [_ngcontent-c0]:

.mat-tab-body-content {
    -webkit-transform: none !important;
            transform: none !important;
}

For fullscreen there are two options previewFullscreen and previewForceFullscreen (starting from 1.1.2), more here https://github.com/lukasz-galka/ngx-gallery#ngxgalleryoptions

One more thing. In your example you had menu with position fixed. At this moment in preview mode this menu is above preview. If you need similar menu in your real life application I can think about some solution for that. Just let me know.

[junimohano]

Thank you. previewFullscreen of property is not working but those code in styles.css is working as below,

.mat-tab-body-content { -webkit-transform: none !important; transform: none !important; }

also can you add z-index higher number on preview ?

[lukasz-galka]

previewFullscreen requires font awesome for icon, did you include font awesome?

[lukasz-galka]

Preview has zindex 10000. If you have other element with position fixed (for example floating header) there can be problems because position depends also on order in html.

I have added two events previewOpen and previewClose in version 1.1.6 and you can make custom action, for example show/hide header.

I'm closing this issue, if you have still problems let me know.

[taghaniali]

Preview has zindex 10000. If you have other element with position fixed (for example floating header) there can be problems because position depends also on order in html.

I have added two events previewOpen and previewClose in version 1.1.6 and you can make custom action, for example show/hide header.

I'm closing this issue, if you have still problems let me know.

Hi, I want to change z-index on previewOpen event but that event is triggered before entering into preview mode, so i can not change z-index value to new value when user enters into preview mode.

[lukasz-galka]

@taghaniali this issue is closed, pls create the new one