WebToolbarButton label style issue with center position

[Grzegorz_Greg_Pasternak]

Working with MBP M1 and Safari.
I have web toolbar on the web page that shows banner aka label to inform user whether the web app is using test or production database. The banner should show in red color.

I would like to center the banner on the web toolbar. It is challenging though. I can get the banner show in center of the web toolbar if I place at least one toolbar button to the right of it, otherwise the banner shows on the right of the toolbar, see snapshot as it looks with the current code where I have commented the About button.

And this is the code:

Note, if I uncomment two last commented code lines the banner will show centered but the About button will be exposed on the toolbar, people don’t like seeing it though.

How can I ensure that the banner is displayed horizontally in the center of the web toolbar?

The second issue has to do with the color of the banner. The method I have in place makes the text of the web label Red, however, when line 3 of the code is commented the color of the label is no longer showing in Red, why? (see snapshot below)

Here is how the web toolbar banner method looks:

It looks to me like there is some room for improvement on Xojo side, perhaps I need to create the issue, but first I would like someone to comment on it please.

[AlbertoD]

If you can share a sample project, we can take a look.

Edit: the ‘centered’ effect is only for elements between 2 flexible space styles. At this time Xojo can’t have a flexible space only to the right.

Edit2: you can add a label with only " " at the end of your toolbar to get the centered effect (maybe it was not obvious on my previous edit)

[Grzegorz_Greg_Pasternak]

I have created the issue with the zipped demo project in Xojo2024R1:

https://tracker.xojo.com/xojoinc/xojo/-/issues/76458

You should easily be able to replicate the issue by commenting code in the Opening event of the WebToolbar control. Thank you.

[AlbertoD]

The case is private, so I get error 404.

[Grzegorz_Greg_Pasternak]

Hmm, I thought that checking “confidential” checkbox makes it only visible internal to Xojo people, now I have learned I should not touch it. Well, one always learns something every day.

Now question is how to “uncheck” the “confidential” checkbox as I don’t see it there.

[AlbertoD]

Private cases are only visible by the creator and Xojo staff.
Usually people check that option if they are sharing the full app and not a sample.

If you want your case to be public, you will need to ask on that Issue to make it public. Xojo staff needs to make it public.

For the ‘center’ option you need:
…MenuNavigation
…FlexibleSpace
…Banner (to be centered)
…FlexibleSpace
…Label with " "
tested with the sample that comes with Xojo.

[Grzegorz_Greg_Pasternak]

OK, I have created duplicate issue with the zipped project demo:
https://tracker.xojo.com/xojoinc/xojo/-/issues/76459

[AlbertoD]

The file didn’t upload correctly.

Edit: I was able to find the file and uploaded to the case.

[AlbertoD]

Your red color for the text changes because how the bootstrap theme is configured.
With FlexibleSpace:

Without FlexibleSpace:

It looks like nothing to fix from Xojo as:

• the centered text is a ‘feature’ of having FlexibleSpace left and right
• the color change is a theme issue

Hope this helps.

[Tim_Parnell]

@Grzegorz_Greg_Pasternak

Hmm, I thought that checking “confidential” checkbox makes it only visible internal to Xojo people

You are correct, that’s exactly what it does. There may be times when you do need it. The gotcha here was that Alberto is an extremely helpful volunteer, not a Xojo Staff member.

[AlbertoD]

Added a mod sample to the issue, hope it helps.

[Grzegorz_Greg_Pasternak]

Yes, adding the empty space as a label after flexible space did result in centering the banner, thank you for that workaround.