Floating messages

This public forum is for user-to-user discussions of PHPMaker. Note that this is not support forum.
Post Reply
ppinto
User
Posts: 138

Floating messages

Post by ppinto »

Any way to change the code to display floating messages (generic, warning, success, failure), like near the bottom left or right corner?


kirondedshem
User
Posts: 642

Post by kirondedshem »

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.


kirondedshem
User
Posts: 642

Post by kirondedshem »

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;


sangnandar
User
Posts: 980

Post by sangnandar »

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.


ppinto
User
Posts: 138

Post by ppinto »

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">&times;</button>
Update succeeded
</div>
</div>

What would be the style changes needed to make this a floating message?


kirondedshem
User
Posts: 642

Post by kirondedshem »

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>


Post Reply