webdialog style not working

Background colour of a style is not being applied to a Web Dialog control…? Not sure if this is a bug or not supported yet.?

Any idea’s

Thanks :slight_smile:

It’s a known bug.

Ah ok thanks Greg. Will just have to drop a rectangle over the Dialog control and add the sytle to the rectangle for now.


Does this bug also mean you cannot use OPACITY in a Web Dialog? I don’t think adding a rectangle would help with opacity since it would allow the dialog below to show through.


FB 15800 - not fixed yet. (2014r2.1)

[h]Sorry Greg[/h], I know you guys are working hard, but the workaround for this one is an ugly one. This one has been around for quite some time, so I just raised attention.


I have applied background styles to my WebDialogs OK, but you don’t add the Style to the original dialog, but the copy/instance of the WebDialog that you have previously dragged onto your WebPage. Adding a Style to your original WebDialog does nothing.

I just tried that under Windows, the dialog simply does not show at all. That said, the rectangle thing is not exactly a workaround worth jumping by the window :wink:

Here’s a WebDialog with a background style from Xojo 2015:

Aha, makes sense, i suppose.



It seems as if Style works fine for Palettes but not for Sheet and Modal windows.

In the HTML Header

.YourDialogStyle{ background-color: #YourColor !important; }


Recently, webdialog required some attention in beta.

So I hoped <https://xojo.com/issue/15800> was fixed ; it is not, but I quickly investigated, and it looks as this now four years old bug is the result of just one small word too much in the dialog HTML class name. One line of JavaScript was enough to work around it.

— Added to the case –

Michel Bujardet Today at 10:01 PM
I looked at the code and it does not seem out of this world difficult to fix.

I created a WebStyle called Blue and applied it to a dialog. The resulting HTML code is :

When I modify as such the code in the browser Developer’s tools, the style is applied :

So it seems the extra "body " before the name of the WebStyle is the reason for that old bug.

Maybe on occasion fixing it would not require rewriting the entire framework.

In the meantime, here is a simple workaround :
Sub Open()
self.ExecuteJavaScript(“document.getElementById(’”+me.controlID+"’).getElementsByTagName(‘div’)[0].className=’"+me.Style.name+"’; ")
End Sub

And, while I was at it, after all, having a transparent or semi transparent dialog could be an interesting thing to do. Here is how to obtain it :

Sub Open() self.ExecuteJavaScript("document.getElementById('"+me.controlID+"').getElementsByTagName('div')[0].className=''; ") self.ExecuteJavaScript("document.getElementById('"+me.controlID+"').getElementsByTagName('div')[0].style.backgroundColor='rgba(255,0,0,0.3)'; ") End Sub

The syntax of rgba is almost the same as Xojo RGB, except Alpha range is between zero (transparent) and one (solid). In this example, the color is semi transparent magenta.