No dialog shown,seems invisible about ngx-simple-modal

[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, ***@***.***> 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 <#40 (comment)>, 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, ***@***.***> 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 <#40 (comment)>, 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, ***@***.***> wrote: 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 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#40 (comment)>, 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, ***@***.***> 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 <#40 (comment)>, 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.