Center button in webtoolbar

I made my first webtoolbar design.

It composed of 4 buttons and I want those button to be shown at center of the toolbar.

Is it possible? How to accomplish it?

Instead of WebButtons, you may put 4 WebCanvas on a WebContainer, and then place the WebContainer on top of the WebToolBar and center using something like :

Container1.Left = (ToolBar1.Width-Container1.Left)/2

This will place the container in the center of the toolbar.

To use the canvases as buttons, place the code you would have used in Action in the MouseUp event.

That’s really great idea!

Thanks you so much!

You should also be able to put a flexible space on either side of the four buttons.

I cant make it work.

Any other technique?

[quote=209016:@ronaldo florendo]I cant make it work.

Any other technique?[/quote]

If you give up at the slightest difficulty you will get nowhere. Besides, how do you expect anybody to help with such statements as “I cant make it work.” ? Try to give some details…

You got two techniques at your disposal : the WebContainer one, and the Flexible Space. Insert a flexible space before the buttons and after them, that will center them.

Thanks Michel,

But I tried both ways, it seems i missed the exact i idea of what they are telling.

Im new to XOJO. Just bought license for WEB a few days ago and planning to buy PRO version soonest.

Im from Clipper 5.0 (DOS based) for 6 years, then migrated to Visual basic 6 for 12 years up to now, then learned basic ASP.NET ( then im here for XOJO.

Maybe that’s the reason why my brain is complicating things?

Anyway, this forum is very useful to me.

Because all of you are very willing to share and help people like me.

Anyway, i just place the BUTTON at the right side of the toolbar (for the meanwhile). Maybe I will try more how to make it center.
I attached my screen to give you idea on what Im working at

Im Happy coding with XOJO.

I just tried doing that ; the flexible space on the right is shown correctly in the IDE, but in the app, it is not taken into account, which does what happens in the contribution just above : buttons end up tucked on the right.

Looks like a bug, does it not ?

[quote=209031:@ronaldo florendo]Anyway, i just place the BUTTON at the right side of the toolbar (for the meanwhile). Maybe I will try more how to make it center.

There seems to be a bug in Flexible Space. But you could add regular spaces on the right of the buttons.

Yes Michel, your test is very correct!

That’s why I cant make it work through those suggestion.

That’s a bug. Please file a report.

40541 - WebToolBar flexible spaces on each side of a button should center it ; right side goes away
Status: Needs Review Rank: Not Ranked Product: Xojo Category: N/A

Michel Bujardet Today at 5:15 PM
OS: OS X 10.11.0

Xojo: Xojo 2015r2.4

Steps: If one places a flexible space on each side of a button in the IDE WebToolBar editor, the button shows centered in the IDE, as expected.

Unfortunately, when run, the flexible space on the right seems to become invisible, and the button appears right justified.

See the attached project.


@Greg O’Lone, i’m using 2016r1

I tried to put: flexible space, button, button, flexible space.

but then both buttons are aligned to the right when i run my project…

what i’m doing wrong?

best regards


Did you check the feedback case directly above your post?
It’s relevant, and still an issue.

It’s the bug you’re experiencing.

Hi @Tim Parnell

I didn’t check, because it’ll a long time ago…
It was on august 23, 2015!!!

So it’s a bug, yet?…



[quote=261217:@Alexandre Cunha]I didn’t check, because it’ll a long time ago…
It was on august 23, 2015!!!

Alexandre, when you see a bug report, never assume it has been fixed. Check in feedback. If it does not say “Fixed and verified”, it is still here. There are bugs dating from 2012 or even before that are still here.

Here is a workaround :

[code] dim js as string

js = js + “document.getElementById(’”+Toolbar1.ControlID+"_Button1"+"’).style.right = ‘50%’"
js = js + “document.getElementById(’”+Toolbar1.ControlID+"_Button2"+"’).style.right = ‘40%’"


Note that you need to take that as what it is : a bandaid, not a definitive fix. The use of “_Button1” el al may break if Xojo changes the framework, and you will have to play on the percentage values to harmonize your buttons. But it will be better than no centering at all.