search

creativetimofficial / ct-paper-dashboard-pro-angular

8 stars 10 forks source link

Bootstrap Modal not accessable #14

Closed PrabhakaranV1592 closed 5 years ago

PrabhakaranV1592 commented 6 years ago

Hello

I have purchased pro version, in that bootstrap modal is not accessible when it is opened, can you provide a quick fix

alexandru-paduraru commented 6 years ago

@PrabhakaranV1592 thank you for using our product and sorry for the late response, we had the Easter in the team. Can you please send us a link or any steps to reproduce the bug? Then my colleague Ciprian will help you.

Best, Alex

maciz84 commented 6 years ago

@alexandru-paduraru I also have this problem. Here is my code:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#topModal"> <i class="fa fa-user" style="color:white;"></i> Big Fish </button>

`

MarcosRibeiroJesus commented 6 years ago

I have the same problem with Modal. When I click on button to open the modal the screen dims and I can't do anything, so I have to reload the page. Any solution my friends? @PrabhakaranV1592 @alexandru-paduraru @maciz84 @chelaruc @marqbeniamin

chelaruc commented 6 years ago

@MarcosRibeiroJesus Can you tell me what OS and browser do you use?

MarcosRibeiroJesus commented 6 years ago

Hello my friend, my OS is Linux Mint 18.2 Sonya and Browser is Chrome Version 65.0.3325.181 (Official Build) (64-bit). Thank you for the good work and have a nice week.

MarcosRibeiroJesus commented 6 years ago

Hello guys, somebody has achieved a solution to this? =(

MarcosRibeiroJesus commented 6 years ago

Hello everyone any update? @chelaruc @alexandru-paduraru any progress with this? Thank's!

prabhakaran-myApps commented 6 years ago

I found a workaround which helped to achive this..

the Work Around is to add the modal code to the parent layout component and call the modal from any component you want.

MarcosRibeiroJesus commented 6 years ago

Hello @PrabhakaranV1592 I tried to reproduces you tip on my code but I didn't make this work... Can you tell me what you did specifically? I tried to create a new component with ngTemplate, put the modal on admin Layout... but nothing works. Thanks in advance.

prabhakaran-myApps commented 6 years ago

Can you share me you code snippet. and how your calling the modal??

MarcosRibeiroJesus commented 6 years ago

I decided to let this really important thing to the next sprint, so I have to focus in another aproache to finalize the functionality, but in the next week I back and show what I tried for see if you can help me. I tried some different''s forms to do that. I saw it maybe happens because of a change in same component of the bootstrap, in another issue I saw the people talking about the difficulty to using modal on children route's and so on. In the next week I'll be back. Thanks for the helping.

MarcosRibeiroJesus commented 6 years ago

Put modal inside app.component let me open modal, now the problem is to use some components inside the modal because of the problem of schemas, app.component don't recognize the component i try to load inside modal... I try make this work soon and back here. Cheers.

rizaldimaulidia commented 5 years ago

Don't put modal div inside <div class="main-panel">. Just put the modal in body tag. for example : <body> <div class="wrapper"> <div class="sidebar"><!-- sidebar --></div> <div class="main-panel"><!-- content --></div> </div>

<!-- Bootstrap modal here --> <div class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>One fine body&hellip;</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div> </body>

this works on free version

dexoitindia commented 5 years ago

@alexandru-paduraru We are facing the same issue please help up need solution ASAP "Bootstrap model show " class is not assigned while open the bootstrap model. it's working in the browser1 but same thing is not happening in browser2. (we are using the lastest version of chrome browser.)

Code: Browser 1 :

<div ngcontent-c6="" class="**modal fade show**" id="bootstrapModelIcard" role="dialog" **style="display: block;**">

Browser 2:

<div _ngcontent-c3="" class="**modal fade**" id="bootstrapModelIcard" role="dialog">

if we use "modal fade show" and style="display: block; in browser 2 for fix the issue we are faciing another issue which is we are unbaled to close bootstrap model.

Thanks in advance.

chelaruc commented 5 years ago

Hi, @dexoitindia. What version of the product do you have? Can you tell me the steps to reproduce the error?

dexoitindia commented 5 years ago

Hi, @dexoitindia. What version of the product do you have? Can you tell me the steps to reproduce the error?

Dear Chelaru Ciprian,

We are using below Version, Paper dashboard pro angular V1.1.0

Steps for reproducing issue (Chrome latest version)please see video :

1.Login in Template 2.Open side Menu

  1. Click on the notification menu
  2. Try for Open Model
  3. Black transparent effect showing instead of open pop up window

https://drive.google.com/open?id=1k55bkpqL7RN4tB_4q3jnQ4uJl6uHoMiE

Thanks.

dexoitindia commented 5 years ago

@alexandru-paduraru We are waiting for your valuable response. please help us ASAP

dexoitindia commented 5 years ago

@alexandru-paduraru We are waiting for your valuable response. please help us ASAP

chelaruc commented 5 years ago

@dexoitindia it is working on our live demo. I'll make some test on Windows to see where the error occurs.

chelaruc commented 5 years ago

I tested on Mac OS and Windows 10 and all is working good.

dexoitindia commented 5 years ago

Thanks, I'll check it out.

On Wed, Jun 19, 2019 at 11:28 AM Chelaru Ciprian notifications@github.com wrote:

Closed #14 https://github.com/creativetimofficial/ct-paper-dashboard-pro-angular/issues/14 .

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/creativetimofficial/ct-paper-dashboard-pro-angular/issues/14?email_source=notifications&email_token=AMA2SDKVGS5ZKDL6TI2I5SLP3HDH5A5CNFSM4EYGQD5KYY3PNVWWK3TUL52HS4DFWZEXG43VMVCXMZLOORHG65DJMZUWGYLUNFXW5KTDN5WW2ZLOORPWSZGOSBV6DYQ#event-2422989282, or mute the thread https://github.com/notifications/unsubscribe-auth/AMA2SDNMYRU6WXC2SLUP4V3P3HDH5ANCNFSM4EYGQD5A .