No dialog shown,seems invisible

[mrjohnr]

Hi I want to use this component in my app,I've done all setups,I see no error in console but dialog seems invisible to me,after I show it I can't focus something in window so there must be present. What could cause this?

Also tried your examples , run npm install in demo folder but got errors on install:

npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! ngx-simple-modal@1.3.8 lint: tslint src/**/*.ts npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the ngx-simple-modal@1.3.8 lint script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\user\AppData\Roaming\npm-cache_logs\2018-04-27T09_58_11_725Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! ngx-simple-modal@1.3.8 build: npm run lint && npm run test && ngc npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the ngx-simple-modal@1.3.8 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\user\AppData\Roaming\npm-cache_logs\2018-04-27T09_58_11_778Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! demo@0.0.1 postinstall: cd .. && npm i && npm run build && cd demo && rimraf node_modules/ngx-simple-modal && cp -rf ../dist node_modules/ngx-simple-modal npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the demo@0.0.1 postinstall script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

thanks

[kevcjones-archived]

Could you dump the output for ng -v on your command line for me so I can try to recreate your environment?

Thanks

[kevcjones-archived]

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.7.3
Node: 9.6.1
OS: linux x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.4.2
webpack: 3.11.0

Working on my machine 🤕 but was back when the latest was 5.2x.

cd demo
npm i
ng serve

[mrjohnr]

Hi.thanks for your answer ng -v :

@angular/cli: 1.7.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.4.2
webpack: 3.11.0

I've updated angular CLI with npm install -g @angular/cli@latest

now got error after ng serve:

ERROR in multi ./src/styles.css ./node_modules/ngx-simple-modal/styles/simple-modal.css
Module not found: Error: Can't resolve 'c:\aa\2\ngx-simple-modal-master\demo\node_modules\ngx-simple-modal\styles\simple-modal.css' in 'c:\aa\2\ngx-simple-modal-master\demo'
ERROR in src/app/alert-select/alert-select.component.ts(2,38): error TS2307: Cannot find module 'ngx-simple-modal'.
src/app/alert/alert.component.ts(2,38): error TS2307: Cannot find module 'ngx-simple-modal'.
src/app/app.component.ts(3,36): error TS2307: Cannot find module 'ngx-simple-modal'.
src/app/app.module.ts(5,55): error TS2307: Cannot find module 'ngx-simple-modal'.
src/app/app.module.ts(17,75): error TS2307: Cannot find module 'ngx-simple-modal/simple-modal/simple-modal-options'.
src/app/confirm/confirm.component.ts(2,38): error TS2307: Cannot find module 'ngx-simple-modal'.
src/app/confirm/confirm.component.ts(35,10): error TS2339: Property 'result' does not exist on type 'ConfirmComponent'.
src/app/confirm/confirm.component.ts(36,10): error TS2339: Property 'close' does not exist on type 'ConfirmComponent'.
src/app/confirm/confirm.component.ts(39,10): error TS2339: Property 'result' does not exist on type 'ConfirmComponent'.
src/app/confirm/confirm.component.ts(40,10): error TS2339: Property 'close' does not exist on type 'ConfirmComponent'.
src/app/custom-error/custom-error-handler.ts(2,36): error TS2307: Cannot find module 'ngx-simple-modal'.
src/app/parent-dialog/parent-dialog.component.ts(2,58): error TS2307: Cannot find module 'ngx-simple-modal'.
src/app/parent-dialog/parent-dialog.component.ts(37,14): error TS2339: Property 'close' does not exist on type 'ParentDialogModalComponent'.
src/app/prompt/prompt.component.ts(2,38): error TS2307: Cannot find module 'ngx-simple-modal'.
src/app/prompt/prompt.component.ts(35,10): error TS2339: Property 'result' does not exist on type 'PromptComponent'.
src/app/prompt/prompt.component.ts(36,10): error TS2339: Property 'close' does not exist on type 'PromptComponent'.

[kevcjones-archived]

Im on the move, but it feels like the post install task has failed which would normally build the module and make a copy into the node modules demo folder. I did it this way because I had trouble using native file refs.

I'll check when in but if you try running a build on the root folder 'npm run build' then back in demo try another ' npm i' and check if it's node_modules/ngx-simple-modal exists and has contents.

Not sure why it's flopped on that.

I will help you resolve.

On Fri, 27 Apr 2018, 15:39 mrjohnr, notifications@github.com wrote:

Hi.thanks for your answer ng -v :

@angular/cli: 1.7.4 @angular-devkit/build-optimizer: 0.3.2 @angular-devkit/core: 0.3.2 @angular-devkit/schematics: 0.3.2 @ngtools/json-schema: 1.2.0 @ngtools/webpack: 1.10.2 @schematics/angular: 0.3.2 @schematics/package-update: 0.3.2 typescript: 2.4.2 webpack: 3.11.0

I've updated angular CLI with npm install -g @latest

now got error after ng serve:

ERROR in multi ./src/styles.css ./node_modules/ngx-simple-modal/styles/simple-modal.css Module not found: Error: Can't resolve 'c:\aa\2\ngx-simple-modal-master\demo\node_modules\ngx-simple-modal\styles\simple-modal.css' in 'c:\aa\2\ngx-simple-modal-master\demo' ERROR in src/app/alert-select/alert-select.component.ts(2,38): error TS2307: Cannot find module 'ngx-simple-modal'. src/app/alert/alert.component.ts(2,38): error TS2307: Cannot find module 'ngx-simple-modal'. src/app/app.component.ts(3,36): error TS2307: Cannot find module 'ngx-simple-modal'. src/app/app.module.ts(5,55): error TS2307: Cannot find module 'ngx-simple-modal'. src/app/app.module.ts(17,75): error TS2307: Cannot find module 'ngx-simple-modal/simple-modal/simple-modal-options'. src/app/confirm/confirm.component.ts(2,38): error TS2307: Cannot find module 'ngx-simple-modal'. src/app/confirm/confirm.component.ts(35,10): error TS2339: Property 'result' does not exist on type 'ConfirmComponent'. src/app/confirm/confirm.component.ts(36,10): error TS2339: Property 'close' does not exist on type 'ConfirmComponent'. src/app/confirm/confirm.component.ts(39,10): error TS2339: Property 'result' does not exist on type 'ConfirmComponent'. src/app/confirm/confirm.component.ts(40,10): error TS2339: Property 'close' does not exist on type 'ConfirmComponent'. src/app/custom-error/custom-error-handler.ts(2,36): error TS2307: Cannot find module 'ngx-simple-modal'. src/app/parent-dialog/parent-dialog.component.ts(2,58): error TS2307: Cannot find module 'ngx-simple-modal'. src/app/parent-dialog/parent-dialog.component.ts(37,14): error TS2339: Property 'close' does not exist on type 'ParentDialogModalComponent'. src/app/prompt/prompt.component.ts(2,38): error TS2307: Cannot find module 'ngx-simple-modal'. src/app/prompt/prompt.component.ts(35,10): error TS2339: Property 'result' does not exist on type 'PromptComponent'. src/app/prompt/prompt.component.ts(36,10): error TS2339: Property 'close' does not exist on type 'PromptComponent'.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/KevCJones/ngx-simple-modal/issues/40#issuecomment-384990476, or mute the thread https://github.com/notifications/unsubscribe-auth/AAqe8K8WKn62FeMDuOqZOPdbSemGwRzaks5tsy2sgaJpZM4TqGzZ .

[mrjohnr]

What about invisible status,I've tried upgrading one project from angularx-bootstrap-modal to ngx-simple-modal but as mention before no error on console but dialog is invisible,I'm sure it exists because after calling this.simpleModalService.addModal I can't focus nothing on the page,there must be invisible.thanks

[kevcjones-archived]

If I were you I'd explore the DOM in dev tools and check if it A. Was created B. What CSS rules were causing it to be invisible.

By design it's typically not a visibility setting when it's shown, the modal is created and destroyed. The container it's in might be invisible or the zindex might be low.

I don't suppose there is anyway you can share a broken example I can help fix?

On Sat, 28 Apr 2018, 07:22 mrjohnr, notifications@github.com wrote:

What about invisible status,I've tried upgrading one project from angularx-bootstrap-modal to ngx-simple-modal but as mention before no error on console but dialog is invisible,I'm sure it exists because after calling this.simpleModalService.addModal I can't focus nothing on the page,there must be invisible.thanks

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/KevCJones/ngx-simple-modal/issues/40#issuecomment-385144790, or mute the thread https://github.com/notifications/unsubscribe-auth/AAqe8EE-M-MJKPxG15D2F5o1Rs6mQSbRks5ttAqegaJpZM4TqGzZ .

[mrjohnr]

Hi I've found this class applied to div next to simple-modal-wrapper:

.fade:not(.show) {
    opacity: 0;
}

<div role="dialog" class="modal fade in" ng-reflect-ng-class="modal fade" ng-reflect-ng-style="[object Object]" style="display: block;">
        <!----><confirm>
    <div class="modal-content">
      <div class="modal-header">
        <h4>Confirmation</h4>
      </div>
      <div class="modal-body">
        <p>Bla bla confirm some action?</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-outline-danger" type="button">Cancel</button>
        <button class="btn btn-primary" type="button">OK</button>
      </div>
    </div>
  </confirm>
    </div>

thanks

[kevcjones-archived]

The 'in' class is added and removed for fading. Forgot that was added, check you have it, it's part of the default style sheet in repo added.

I'll update the docs for migration to make this clearer.

On Sat, 28 Apr 2018, 11:03 mrjohnr, notifications@github.com wrote:

Hi I've found this class applied to div next to simple-modal-wrapper:

.fade:not(.show) { opacity: 0; }

Confirmation

Bla bla confirm some action?

Cancel OK

thanks

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/KevCJones/ngx-simple-modal/issues/40#issuecomment-385162039, or mute the thread https://github.com/notifications/unsubscribe-auth/AAqe8KnT9heFQhZ6Pz1wZZCWBM-1iJTpks5ttD5XgaJpZM4TqGzZ .

[mrjohnr]

it is:

<div role="dialog" class="modal fade in" ... also dialog is not centered

[mrjohnr]

there is any fix I can do,for the moment it doesn't work for me even I put this in confirm.component.css

.fade:not(.show) {
    opacity: 1 !important;
}

[kevcjones-archived]

Could you recreate the problem in a stackblitz demo? If so I will help fix, but without seeing your global styles and implementation it's pretty tough to assist.

On Sat, 28 Apr 2018, 11:31 mrjohnr, notifications@github.com wrote:

there is any fix I can do,for the moment it doesn't work for me even I put this in confirm.component.css

.fade:not(.show) { opacity: 1 !important; }

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/KevCJones/ngx-simple-modal/issues/40#issuecomment-385163799, or mute the thread https://github.com/notifications/unsubscribe-auth/AAqe8A3XZ22qu2YuU5Scg3NxqIF7wUziks5ttEUYgaJpZM4TqGzZ .

[mrjohnr]

seems putting this code to app style.css seems to work(no invisible):

.fade:not(.show) {
    opacity: 1 !important;
}

but the dialog has screen width,there is a way I can control it? thanks

[mrjohnr]

seems to work with this:

.modal-content {
    margin: 20px auto;
    max-width: 580px;
    position: relative;
    width: 100%;
}

[mrjohnr]

Just one last problem and will not annoy you: when I want to close it pressing one of the confirm buttons it took up 1 second to close,there is any way to speed it up?thanks

[mrjohnr]

Seems to work fine if I put css in style.css not in component.css:

transition: opacity 1ms linear;

[kevcjones-archived]

I'll update the readme to make this clearer for other people but the styles are indeed mean't to be loaded globally since you might have more than one modal, its the better place to put them. Leaving your local styles for customisations and modal content only.