Any way to change the code to display floating messages (generic, warning, success, failure), like near the bottom left or right corner?
Floating messages
-
- User
- Posts: 642
If you inspect a popup message dialog you will be able to see has a div with id = "ewMsgBox" so you just need to apply the neccessary style chnages.
For example, I am positioning the message dialog at the bottom left and also limiting its width to 300px.
You will notice it only overides the div with class = "modal-dialog" which is inside a div with id = "ewMsgBox", you dont want to change on just any modal-dialog as its used elsewhere as well.
So paste the following into page_head:
<style type="text/css">
/*
possition message dialog at bottom left
ALso limit its size to 300ox in witdth
*/
#ewMsgBox .modal-dialog
{
margin-top:100%;
margin-left:0px;
width: 300px;
}
</style>
NOTE: you can also just add this to the user styles in html settings instead.
-
- User
- Posts: 642
Ive seen the message dialog appears only after you scroll since its to far down, so lets bring it into visible range
so change margin-top:100%; to margin-top:500px;
-
- User
- Posts: 980
You can also use jQuery
$(window).height();
$(window).width();
to stick the floating messages to browser window, to keep it maintain its position during window resize.
-
- User
- Posts: 138
Thanks for the replies, guys!
Still, I'm not quite able to make it work. If I inspect the dialog. it doesn't have any id. This is the code of a typical message:
<div class="ewMessageDialog">
<div class="alert alert-success ewSuccess">
<button type="button" class="close" data-dismiss="alert">×</button>
Update succeeded
</div>
</div>
What would be the style changes needed to make this a floating message?
-
- User
- Posts: 642
If I enable enable "use javascrip popup message" in advanced settings and I do an add/update/delete operation, the message dialog looks like below, Even when am filling a form which has a required filed and I try to submit minus entering content, The error message of "please enter required filed filed_name" also appears in a similar dialog.
AM using phpmaker 2018, so maybe its different for you
<div id="ewMsgBox" class="modal in" role="dialog" aria-hidden="true" style="z-index: 1050; display: block; padding-left: 17px;"><div class="modal-dialog"><div class="modal-content"><div class="modal-body"><div class="ewSuccess text-success">Update succeeded</div></div><div class="modal-footer"><button type="button" class="btn btn-primary ewButton" data-dismiss="modal">OK</button></div></div></div></div>
SO for the above I put this in page_head and it works.
<style type="text/css">
/*
possition message dialog at bottom left
ALso limit its size to 300ox in witdth
*/
#ewMsgBox .modal-dialog
{
margin-top:500px;
margin-left:0px;
width: 300px;
}
</style>
BUT If you say your looks like the way you posted it them try this below putting it in page head:
<style type="text/css">
/*
possition message dialog at bottom left
ALso limit its size to 300ox in witdth
*/
#ewMessageDialog
{
margin-top:500px;
margin-left:0px;
width: 300px;
}
</style>