Xojo2026R1.2: WebLabel shifting to the right on WebPage when opening WebDialog

Targets Web
1

This seems to be the bug to me but I need to confirm.

The left aligned WebLabel control on the WebPage is shifting to the right when I click the button on this page to open WebDialog with some text. Upon closing this WebDialog the mentioned WebLabel shifts back to the left to its original position. There is nothing in the code causing it to happen. I have compared WebText control and it does not exhibit the same behavior.

I have consulted with Claude (AI) and got few suggestions but none of the proposed solutions fixed this issue.

2

Do you have a sample project?

3

It could be a browser issue, sometimes browsers interpret things differently. What browser are you using to view the project?

Also, what platform are you building this for? Many people build / host on Linux.

4

Working on it, however, I can’t replicate the behavior in the test project just yet.

5

LabelTest.zip (44.7 KB)

Alberto, here you go.
I think the shifting has to do with the dynamic assignment of the label text.

6

Amy, thanks for your interest but I don’t think the browser has anything to do with it, see the sample project illustrating the shifting.

7

I know nothing about xojo web projects, but what I can see is that the label isn’t actually moving, the caption is just becoming center aligned.

Screenshot 2026-07-21 at 1.32.50 PM
Screenshot 2026-07-21 at 1.32.50 PM505×184 7.68 KB

Screenshot 2026-07-21 at 1.33.00 PM
Screenshot 2026-07-21 at 1.33.00 PM1133×479 15.9 KB

Hopefully someone with more experience in this area can figure out why.

8

This is happening because, in MyWebDialog, you’re loading some irresponsible CSS in to a WebHTMLViewer:


Var htmlText As String

Const styleBlock As String = "<style>" + _
"body{margin:0;padding:0;}" + _
"p{margin:0;padding:0;text-align:center;}" + _
".spacer{height:16px;}" + _
"</style>"

htmlText = styleBlock

htmlText = htmlText + "<p>This is <strong>test text</strong> for the WebDialog</p>"

htmlText = htmlText + "<div class=""spacer""></div>"
htmlText = htmlText + "<p>Another line of text</p>"

HtmlViewerInfo.LoadHTML(htmlText)

Return
1 Like
9

OK, so the html text on the WebDialog interferes with the alignment of the WebLabel on the underlying WebPage2. Interesting. I am giving this to Claude and will see what comes out of it.

Worth updating the forum thread with this, since it reframes the whole issue for Alberto: it's not a WebDialog/WebLabel layout bug at all, it's that HtmlViewerInfo.LoadHTML's injected <style> block isn't scoped to that HtmlViewer's content — bare-tag selectors like p{...} are leaking out and applying page-wide. That's arguably the more interesting bug to report, since anyone using LoadHTML with unscoped CSS could be silently clobbering styles elsewhere on the same page, not just alignment on a label.
10

That CSS has no specificity and is being loaded into a DIV element on that page via the use of a WebHTMLViewer.

Change SetInfoText to this:

var htmlText As String

var styleBlock As String = "<style>" + _
"#" + me.ControlID + "{margin:0;padding:0;}" + _
"#" + me.ControlID + " p{margin:0;padding:0;text-align:center;}" + _
"#" + me.ControlID + " .spacer{height:16px;}" + _
"</style>"

htmlText = styleBlock

htmlText = htmlText + "<p>This is <strong>test text</strong> for the WebDialog</p>"

htmlText = htmlText + "<div class=""spacer""></div>"
htmlText = htmlText + "<p>Another line of text</p>"

HtmlViewerInfo.LoadHTML(htmlText)

Return
11

Great, thank you for your quick solution. The sample project now no longer shows the shifting, I will use this fix in the real production project, thanks again.

12

And don’t listen to Claude on this one. It’s not a Xojo bug.

1 Like
13

Ha ha, you are restoring my faith in humanity! Thanks again.