Hi folks. I’m just wondering if it’s possible to restrict the width of a webtoolbar, when accessed from the hamburger menu. I’m not fond of how it uses so much empty horizontal space, and would prefer it fits the width of its item content.
Also, is it possible to center the webtoolbar content when viewed on larger screens?
Since Xojo 2023r1, you can center the WebToolbar control. To center it in a WebPage, just remove the Left and Right locks, disable the Full Width option and set the position to Inset.
This way you can position the toolbar anywhere, including a WebDialog, if you want.
Thanks, Ricardo. It seems 2021r2.1 has the same options, but with no effect.
Yes @Bill_Dawson, in previous versions the WebToolbar wasn’t able to be positioned in other places, or inside Containers & Dialogs.
Let me see if I can figure out a way to do it with that version, other than updating.
Thanks, man. Much appreciated. Actually, I already have the toolbar & all other main page elements inside a container. Would putting the toolbar inside its own container, inside the larger container allow me to do what I want? The larger container (main page) is only used so I can center the main content when the app loads. Never thought that the toolbar could be in its own container.
A bit hacky, but if you have it inside a Container, you can add this code to the WebToolbar.Shown event:
Me.ExecuteJavaScript("document.getElementById('" + Me.ControlID + "').querySelector('.navbar').classList.remove('fixed-top');")
It will flicker a bit, I guess you can solve it playing with the Visible property and a WebTimer.
Thanks again! I’ll have a play with that and see what I can do. I may be slow to report results because, well, I’m slow. LOL
No problem! I hope it works, but send another message if needed 
Strange results. No flickering though. Any thoughts?
Could this be due to having the main page container centered?
EDIT: Nope. Tried left-top anchoring and it’s the same result.
@Ricardo_Cruz can you insert an icon or a picture now in a webtoolbar ? it wasn’t possible last time I tried… thanks.
I assume you mean other than menu item icons…like a logo. I know I saw a tutorial on how to do that, but I’ll be damned if I can find it again. So, short answer, I don’t think so. I ended up using imported font text and a css text-shadow.
…But then again, I’m no Ricardo. 
BTW, I solved the problem in the 1st image by increasing the z-index of the webtoolbar. Still have all that empty space to the right of menu items though (see img 1).
EDIT: As far as toolbar width when viewed on a phone, I got that figured out.
WebToolbar Opening Event:
me.Style.Value("width") = "300px"
For larger viewports, I guess I’ll just disable Ricardo’s javascript and/or reset the toolbar width. Unless any of you folks that are smarter than me have a better idea, I can live with this.
Yes @Jean-Yves_Pochez, you should be able to add icons to WebToolbarButtons:
Var btn As New WebToolbarButton
btn.Caption = "Home"
btn.Icon = WebPicture.BootstrapIcon("house", Color.White)
Me.AddItem(btn)
Is this what you are trying to do?
I was more thinking of a picture, to have some logo on the top left of the webtoolbar ?
1 Like
Ah, sorry. I think you can do it using WebToolbar.Icon, with a WebPicture.
Edit: Uhm, that doesn’t seems to be working fine. Let me check if there is a related reported issue.
@Jean-Yves_Pochez I’ve created this Feature Request:
#72347 Allow WebToolbar.Icon to be bigger, or add a WebToolbar.Logo property
1 Like