AlertBox, MessageBox and custom dialog position

#1 · May 26, 2019, 11:47 pm

Hi,

is it possible to center an AlertBox, MessageBox or a custom dialog based on the scrolling position of a page on the screen of a device instead of considering the top (top: 0px) of the page)? I think I can do it with CSS ..
Thank you :-)

#2 · May 27, 2019, 4:27 pm

Hi @punglising,

Try this CSS for any Custom Dialog (Add the CSS under Project > Properties > Styles):

#DialogContainer1{
   position:absolute;
   width:500px;
   height:300px;
   top:0px;
   left:0px;
   right:0px;
   bottom:0px;
   margin:auto;
}

It's possible to center Alerts and MessageBoxes in a similar way modifing their default CSS classes.

Punglisin has reacted to this post.

#3 · May 28, 2019, 11:33 pm

@luishp, I tested the code with an AlertBox: it works and positions the alert correctly in the center of the page. Is it possible to show it at the current scrolling position of a page (eg consider a page with a relevant height, greater than the fixed one set in the properties of the web app)?

#4 · May 29, 2019, 5:32 am

@punglisin, @luishp:

It's possible to center Alerts and MessageBoxes in a similar way modifing their default CSS classes.

I tested the code with an AlertBox: it works and positions the alert correctly in the center of the page.

I can confirm that the CSS works for a Dialog Container within my Dialog pages (where I can assign it my own id).

But, for AlertBox, MessageBox etc., what #id do you use within the CSS ?

Is it possible to show it at the current scrolling position of a page (eg consider a page with a relevant height, greater than the fixed one set in the properties of the web app)

This code ...

BeginJS
scrollPos = $(window).scrollTop();
alert(scrollPos);
EndJS

... will give you the position of your page that has been scrolled from the top of the page ... so now, you have to set the Dialog object's top property to be the same ... but, this javascript does not work ...

BeginJS
scrollPos = $(window).scrollTop() + "px";
$("#DialogSimple").css("top", scrollPos);
EndJS

... it has to do with the fact that the Dialog Container (#DialogSimple) is defined with position:absolute ... without knowledge of its parent container, I am stuck on how to effect this change at run time.

Punglisin has reacted to this post.

#5 · May 29, 2019, 6:46 am

Please take a look at the attached sample with the CSS I propose.
There are buttons vertically distributed at different positions.
Test it under FireFox or Chrome, not using the Run command as it will use old IE rendering engine.
For AlertBox and MessageBox will be necessary to study default BootStrap CSS for these elements and overwrite them.

Regards.

Uploaded files:

You need to login to have access to uploads.

Punglisin has reacted to this post.

#6 · May 29, 2019, 6:13 pm

@Luis:

Your demo app confirms what I experienced with my own custom Dialog i.e. display the Dialog Box at the center of the Browser View Area.

However, I think that what @Punglisin is asking, is for the Dialog Box (or the AlertBox or Message Box) to be displayed NOT at the center of the Browser's Viewing Area, but in line with (or slightly lower than) the currently scrolled (visible) part of the page ... in other words, always at (or slightly below) the top edge of the Browser Viewing Area.

Currently, height:0px causes the box to be centered on the Browser Viewing Area ... the height of the Browser Viewing Area on my laptop is 533px ... so if I set ...

#DialogSimple{
position:absolute;
width:500px;
height:300px;
top:-260px;
left:0px;
right:0px;
bottom:0px;
margin:auto;
}

... at Design time using Project >>> Properties >>> Styles, then the Dialog Box is positioned where I want it too.

However, since the same app could be viewed in devices with differing Browser Viewing Areas, I thought of changing this property via script like so ...

BeginJS
clientHeight = document.documentElement.clientHeight;
alert(clientHeight);
document.getElementById( "DialogSimple" ).style.top = "-300px";
//$("#DialogSimple").css({'top', '-300px'});
EndJS

OpenDialog "Dialog1"

... but it does not take effect (both jQuery and native methods).

A bit of experimentation suggests that something in the inner workings of Bootstrap prevents changing CSS values when the Dialog Box is not visible ... i.e. when I placed a Container inside the Dialog Box and coded the CSS change (native method) in its 'click' event, it worked ... too bad there is no equivalent to VisualNEO Win's event routine (for CustomWindow command) when the Dialog Box is opened.

Punglisin has reacted to this post.

#7 · June 1, 2019, 8:57 pm

However, I think that what @Punglisin is asking, is for the Dialog Box (or the AlertBox or Message Box) to be displayed NOT at the center of the Browser's Viewing Area, but in line with (or slightly lower than) the currently scrolled (visible) part of the page ... in other words, always at (or slightly below) the top edge of the Browser Viewing Area.

@gaev exactly!

A bit of experimentation suggests that something in the inner workings of Bootstrap prevents changing CSS values when the Dialog Box is not visible

..I confirm this behavior!

I made a rudimentary solution that uses a javascript timer and css changes. I finally created a plugin to show custom alerts from another javascript library. Thank you! :-)

#8 · June 2, 2019, 2:34 am

@luishp:

Regarding my earlier comment ...

too bad there is no equivalent to VisualNEO Win's event routine (for CustomWindow command) when the Dialog Box is opened.

... it might be too late to add a parameter or two (dialogOpenSubroutine, dialogCloseSubroutine) to the OpenDialog command (without breaking existing Apps that only have one parameter specified) ... unless you create a new command OpenDialogPro.

But is it possible to add events within the DialogContainers within Dialog Pages, where developers can specify actions to be taken upon popup and dismissal of these Dialog Boxes ?

@punglisin

I finally created a plugin to show custom alerts from another javascript library.

You didn't say which library you went with ... here is a list from my Bookmarks archive ...

https://sweetalert2.github.io/
https://ned.im/noty/#/
http://sciactive.com/pnotify/
http://protip.rocks/
http://qtip2.com//
http://catc.github.io/simple-hint/

https://github.com/CodeSeven/toastr
http://bootstrap-notify.remabledesigns.com/

... some of them merit a VisualNEOWeb plugin ... just can't decide on one :-))

Punglisin has reacted to this post.

#9 · June 3, 2019, 11:21 am

@punglisin and @gaev,

Please take a look at the attached sample.
It uses slOpenModal and slCloseModal from PowerApp plugin.
This way you can move the window to any position and even show more than one at the same time.
These commands open a lot of possibilities.

Regards.

Uploaded files:

You need to login to have access to uploads.

Punglisin has reacted to this post.

#10 · June 3, 2019, 9:03 pm

@luishp:

That does it ... almost.

The object (container) to be used as the Modal Window HAS to be located in the same page as the currently viewed page; so ...

a) can't save all such Modal containers 'out of sight' e.g. in the Dialog Tab or on a separate 'hidden from user' page

b) it is not convenient to have all such containers for a particular page setup at locations that are 'out of sight' of the user

Suggestion - in the area with Tabs labelled Design | Code | Split, it would be nice to have an additional Tab (say Hidden) where a developer could place all such objects ... have VisualNEO take care of assigning 'out of sight' locations ... enable the developer to move/show/slOpenModal them at run time via script.

In the mean time, we will just have to do it manually.

#11 · June 3, 2019, 10:58 pm

@gaev,

The object (container) to be used as the Modal Window HAS to be located in the same page as the currently viewed page; so ...

It can be in a Master page too. The container can be moved anywhere, its content changed and even the size modified. Possibly you can animate it too :)

#12 · June 3, 2019, 11:12 pm

@luishp

It can be in a Master page too.

Yes, but managing too many of these in an 'out of sight' position becomes labour intensive during development ... too many mouse actions ... although similes of the AlertBox and MessageBox could be located here ... and deployed (slOpenModal) from any page.

The container can be moved anywhere, its content changed and even the size modified. Possibly you can animate it too :)

Those are great benefits ... and much more appealing than the Dialog stuff.

I suppose I will just have to live with the additional mouse actions during development (or look for a 40" monitor).

#13 · June 4, 2019, 7:14 am

@gaev,

Yes, but managing too many of these in an 'out of sight' position becomes labour intensive during development

The trick is just unchecking the "visible" property. No need to put the Containers into an 'out of sight' position.
I have done some experiments and it's even possible to use any Object as a Modal Window, not just containers.
Please, take a look at the attached sample.
Regards.

Uploaded files:

You need to login to have access to uploads.

#14 · June 4, 2019, 2:23 pm

@luishp

The trick is just unchecking the "visible" property.

I was aware of it ... but then these hidden objects clutter up the visible space ... making it a bit more difficult to select objects at Design Time.

Its OK ... I will work with the current layout.

The Modal stuff is more flexible than the Dialogs stuff ... but the Dialogs stuff can be reused (called) from multiple pages.

#15 · June 4, 2019, 8:25 pm

You didn't say which library you went with ... here is a list from my Bookmarks archive ...

https://sweetalert2.github.io/
https://ned.im/noty/#/
http://sciactive.com/pnotify/
http://protip.rocks/
http://qtip2.com//
http://catc.github.io/simple-hint/

https://github.com/CodeSeven/toastr
http://bootstrap-notify.remabledesigns.com/

... some of them merit a VisualNEOWeb plugin ... just can't decide on one :-))

@gaev ahahah :-) I created the plugin using the sweetalert library, which is the first on your list!

@luishp Thank you very much for the proposed solutions and examples! I will try those alternative commands for dialogs as soon as possible! :-)

AlertBox, MessageBox and custom dialog position - Forum

AlertBox, MessageBox and custom dialog position