search

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

7 stars 2 forks source link

Modals aren't clickable on window < 993 px #7

Open BenVia74 opened 7 years ago

BenVia74 commented 7 years ago

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 7 years ago

@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 7 years ago

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 7 years ago

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 7 years ago

oh thanks, it's works like a charm!

BenVia74 commented 7 years ago

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 7 years ago

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 7 years ago

@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 7 years ago

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

alexandru-paduraru commented 7 years ago

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.