Modal Window

PHPMaker General Discussion (PHPMaker)
1

How can we change modal window size for a specific table edit page ?

2

You may add CSS to the modal dialog by Startup Script (see the topic Server Events and Client Scripts in the help file). In Chrome, right click the modal and select “Inspect” to check the id. Also see: https://getbootstrap.com/docs/4.1/components/modal/#optional-sizes.

3

i used the following in Theme->Styles->User
.modal-xl {
max-width: 500px;
}

which works fine. but that applies on all table modals.
I want to apply it on a specific table edit page.
For that i tested the following:
$(“.modal-lg”).css(“max-width”: “500px”);
in ClientScripts->TableSpecific->EditPage->StartupScript
but there is no effect.

Kindly help.

4

shahparzsoft wrote:

which works fine. but that applies on all table modals.

That’s because modal-xl is a Bootstrap CSS class, you should select by id.

5

I tried almost everything, but failed.

// Write your table-specific startup script here
// console.log(“page loaded”);
$(“#ew-modal-dialog”).css({“max-width”: “500px”});
$(“#ew-modal-dialog”).css(“max-width”: “500px”);

can anybody help ?

6

Config(“BODY_CLASS”,Config(“BODY_CLASS”).’ ‘.str_replace(’.php’,‘’,strtolower(CurrentPageName())));

in Global code, which event should be put that line ?

7

Server Events->Global->All Pages->Global Code

ok.

when i put following in user styles, then it does’nt compile. Gives error:

@media (min-width: 1200px)
.companyprofilelist .modal-xl {
max-width: 500px;
}
@media (min-width: 992px)
.companyprofilelist .modal-lg, .mypagelist .modal-xl {
max-width: 500px;
}

8

yes. that’s were missing.
I added that brackets. now it is working like a charm.

thanks a lot @xxltomcat.

Even this is little tricky but works. but there must be a solution in Server Events too.

once again thanks a lot.