Custom dialog

#1 · September 27, 2021, 4:20 pm

Hi all,

When I call OpenDialog, the window is always displayed top, center unless the position fixed for the properties container.

I want another position, I tried adding a css class in style fixing a position for top and left. For top it works, but for left no it stay center.

Why and is there another solution ?

#2 · September 27, 2021, 5:34 pm

Hi @phil78, not sure what you want to achieve but, have you seen this video tutorial?
There is also a different kind of "Custom Dialogs" you can use thanks to slOpenModal and slCloseModal commands. Any Container may be used as a Modal Dialog and placed exactly where you need to.

Regards

#3 · September 27, 2021, 5:40 pm

@phil78 please take a look at the attached mini-sample.
Regards

Uploaded files:

You need to login to have access to uploads.

#4 · September 27, 2021, 6:17 pm

Hi Phil78,

when you want to repositon the modal dialog you can do this with this workaround too:

1. Open Project/Properties... (F6)

2. Choose Tab Styles

3. Enter styles for the class .modal like this example

.modal {
position: absolute;
top: 300px;
right: 50px;
bottom: 0px;
left: 350px;
}

When you enter it in the properties on the right it will be alway centered. There seems some trouble with the order when css styles are loaded.

Greets

timbojones

#5 · September 29, 2021, 5:37 pm

Hi @luishp @timbojones thanks for your answers

I cannot use slOpenModal because it does not suspend the following actions until the dialog is closed.

I cannot use also position absolute, because when I resize the browser the position is wrong.

But finally I have found a solution with css after many manipulations with the inspector which put the messages on the center and reduce the width to be less larger than the application, and fix the left position of my dialog box cEchelle at the right position using right instead of left !

.modal-dialog {
padding-top:0;
max-width:400px;
top:250px;
border-radius:2;
}
.modal-header {
background-color:#4682B4;
}
.modal-content {
background-color:#F0F8FF;
}
#cEchelle{
right:190px;
top:570px;
}

luishp has reacted to this post.

Custom dialog - Forum

Custom dialog