creativetimofficial/ct-light-bootstrap-dashboard-pro-angular

Modals aren't clickable on window < 993 px

Opened this issue · 9 comments

BenVia74 commented

Hi,
Modals are not clickable on window under 993px but work on fullscreen. I have same problem on Chrome and Firefox.

Do you know how to fix it?

Tank you,

bugmodal

chelaruc commented

@BenVia74 thank you for using our product.
To solve the problem you have to go in assets/js/light-bootstrap-dashboard.js and add $('.modal').appendTo("body"); in $(document).ready(function(){.

Please tell us if it works.

Keep in touch,
Ciprian

BenVia74 commented

Sorry, it doesn't work, it seems to have the same problem on your demo website your demo site

It's may be a z-index problem on class .modal-backdrop. In firebug, i change z:index 1040 to 0, i can use modal but background disappear.

chelaruc commented

Ok, then delete $('.modal').appendTo("body"); from js file and go in app/dashboard/components/notifications/notifications.component.ts and replace

export class NotificationsComponent{}

with

export class NotificationsComponent implements OnInit{
    ngOnInit(){
        $('.modal').appendTo("body");
    }
 }

Keep in touch,
Ciprian

BenVia74 commented

oh thanks, it's works like a charm!

BenVia74 commented

Sorry, but finally it's doesn't work. My button "save change" send a form.

So when i move the modal to body with append, i can't submit my form. There is nothing happend when i click it.

I'm looking for a solution. Could you explain how this class modal-backdrop is added? It's seem appear on mobile view.

Thanks

BenVia74 commented

I fix it with this code for the moment. I can't have black background but my submit is working now.

@media (max-width: $screen-md){
    .modal-backdrop.in {
        display:none;
    }
}
alexandru-paduraru commented

@BenVia74 the modal-backdrop.in is a class that is coming from Bootstrap Framework. From what we know the form is not working because it is moving the div.modal-body to the <body> tag so it will not appear under the backdrop.

We've seen that the problem is coming from line 8581 in assets/css/light-bootstrap-dashboard.css
Please go to that line and remove this code:

    -webkit-transform: translate3d(0px, 0, 0);
    -moz-transform: translate3d(0px, 0, 0);
    -o-transform: translate3d(0px, 0, 0);
    -ms-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0);

Can you please share how you have the form and the modal? Which one contains which?
Let us know if that was working fine.

Best,
Alex

BenVia74 commented

Could you tell me what's the class to edit. I already edit some scss file, the line 8581 has changed.

alexandru-paduraru commented

sass/lbd/_responsive.scss line 139 where is

.main-panel,
.wrapper-full-page{
    @include transform-translate-x(0px);
....

And remove the @include transform-translate-x(0px); property.