Wrong and a bit annoying Icon Alignment Webtoolbar

Screenshot WebToolbar

Screenshot WebToolbar (Zoomed in)

This bug exists since the start of Web 2.0. I thought this kind of small glitch will be corrected “automatically”, but I was proven wrong :wink: . Hence, I opened a feedback case today: feedback://showreport?report_id=64015

It is easy to reproduce. The alignment of a buttonStyles.Menu is just not 100% accurate.

// Documents button
Var documentsButton As New WebToolbarButton
documentsButton.Icon = WebPicture.BootstrapIcon("file-text") 
documentsButton.Caption = "Documents"

// User menu
Var userButton As New WebToolbarButton
userButton.Style = WebToolbarButton.ButtonStyles.Menu
userButton.Caption = session.gFirstname
userbutton.Icon = webpicture.BootstrapIcon("person", &cff9300)
var changePassword as new WebMenuItem("Change Password")
changePassword.icon = pChangePassword
userButton.menu.AddMenuItem( changePassword )
Me.AddItem( userButton) 

// Test Button to prove it is not related to the chosen icon, nor the color etc
// Icon alignment is different per button type, which is a bug
Var documents2Button As New WebToolbarButton
documents2Button.Icon = WebPicture.BootstrapIcon("person", &cff9300) 
documents2Button.Caption = "Jeannot"
documents2Button.Tag = "Jeannot"

Workaround with CSS is possible (but only to a certain extend) but not a durable workaround. Webtoolbars are the first impression, and they should look nice.

https://xojodocs.com/ is giving a live example too. Please look there at the “blog” button. Its alignment is different from those buttons with submenus.


Update: on xojodocs I “mitigated” the bug already a bit by playing around with CSS and different icon sizes and colors. This is hiding the issue a bit “visually”, but of course the bug persists. In my example above I’m using for that reason the same bootstrap icon for both button styles, this makes it far more obvious and comparable.

Would love to see this fixed soon. Jeannot is absolutely right about first impressions :slight_smile: