WebToolbarButton - Badge - Style

Hello,

I’m building a web app in 2024 1.1.

The WebToolbar has a lot more functionality than when I last used it.

I’m finding the WebToolBarButton badges very useful for displaying progress, counters and status messages. Examples:

Screenshot 2024-05-11 at 10.17.25 am

Screenshot 2024-05-11 at 9.57.08 am

I imagine the badge is styled from the badge styles in the underlying bootstrap theme.

Screenshot 2024-05-11 at 9.31.36 am

I imagined BadgeStyles may have been exposed and set similarly to WebToolbarButton.ButtonStyles:

WebToolbarButton.ButtonStyles.FlexibleSpace or Label or Menu or Push Button or Separate Menu or Separator or Space or Toggle

Therefore:

WebToolbarButton.BadgeStyles.Primary or Secondary or Success or Danger or Warning or Info or Light or Dark

however Badge styles are not exposed in that manner.

There does not even appear to be a Style property for the Badge.

I’d like to style the Badges individually.

Please advise how to style a WebToolbarButton Badge.

Thank you.

Kind regards, Andrew

Hi Andrew,

Here is simple WebToolbar, I’ve added a WebToolbarButton.ButtonStyles.PushButton. The ‘911’ is the default appearance when you use the MyButton.Badge = "your text" property.

I was able to style the “411” by an example I found in ‘BootstrapExtends’ sample. I don’t know who to credit for this, but it is a big help - might be what you’re after. I found it in a folder named ‘Xojo-Web2.0-Bootstrap-Extensions-main’

Unfortunately, I have yet to find a simple (easy, off-the-shelf) way to set the Foreground color of the .Caption for buttons :frowning:

image

Thank you @William_Reynolds (William),

Thank you for confirming there isn’t a built in method.

I will investigate the example you highlighted over the weekend.

When I read your reply it jogged my memory of this post by @Fabian_Eschrich from 2021 Bootstrap Badges for Xojo Web2.0 Controls which is likely closely related to the highlighted example.

Many thanks William!

Kind regards, Andrew

You can do it with plain old regular CSS.
Just inspect the element in any browser you like, do the modifications you want and then add them to the css header in xojo… (that’s until you find an alternative in-code solution)

Thank you for your reply @Gabriel_L (Gabriel),

I considered that approach - but considered it blunt as it changes color for all instances of that style.

In the context of my “Andrew’s Profile” example above.

Inspecting that element reveals:

Screenshot 2024-05-12 at 12.13.56 pm

So inspecting the page, rather than class “badge bg-danger”, I’d like to apply “badge bg-info” or “badge bg-success” etc, but I can’t right now without applying William’s solution above.

Class=“badge bg-danger” reveals:

Screenshot 2024-05-12 at 12.14.50 pm

So, I could override the settings of CSS class .bg-danger in the HTML Header of the App, but that would change it for every instance of .bg-danger. I am trying to set badge color contextually for a number of WebToolbarButton/s.

Maybe I misunderstood something in your approach?

Kind regards, Andrew

Sure but, you can only style the badges that belong (are a child of) to a .navbar-nav or .nav-item

.nav-link .badge.bg-danger {
  background-color: blue;
  color: green;
}

Ah sorry you said you only wanted for some of the toolbar’s buttons. I just read that. Oups :frowning:

Change the btn caption and use raw (I will add a Feature Request for this):

btn.Caption = "Button <raw><span class='badge bg-info'>5</span></raw>"

Xojo should offer all the styles not just the red one (danger).

Note: Bootstrap 5.3 badge page mention that the class is now text-bg- but it still works without text-, maybe is better to use what Bootstrap suggest.

Issue #76271 - WebToolbar badges should be available with other styles

2 Likes

Thank you @AlbertoD (Alberto),

Yours is the most efficient and flexible solution!

I’m just getting caught up on Xojo Web after a long absence.

I think it should work like that.

Kind regards, Andrew

text-bg- styles apply a background with a complementary text color. So, for example, if you use text-bg-danger your theme will likely apply a red background with white text. If you use text-bg-light, then you’ll get a light gray background with black text. Unless you really need to specify the color of the text separately for some reason, you should use text-bg- styles as it applies appropriate contrast to the element.

In the image in the first post, you can see that the text in the “Light” badge is hard to read due to the use of bg-light rather than text-bg-light. You can read more about this in the context of badges here.

2 Likes

Noted with thanks @Anthony_G_Cyphers (Anthony)!

(As you say “hard to read”) Noticeable (not optimal but liveable), with the random theme screenshot I chose off bootswatch.com, but even more pronounced when you use the built-in Xojo theme.

Using “badge bg-light”.

Screenshot 2024-05-13 at 11.41.23 am

Thank you for your advice, it is always appreciated.

Kind regards, Andrew

1 Like

Thank you. As I just visited the Bootstrap page in dark mode and saw the example with text I assumed it was new. That makes sense.
Thanks

For completeness:

Using ‘badge text-bg-light’

Screenshot 2024-05-13 at 1.23.14 pm

1 Like

Hello, is there a way to keep consistency over the different types of fields ?

For example it renders properly over the text fields but it seems that for the date picker fields, they render somewhere in the middle of the field . So where should i look to adapt this based on the field type ?

Screenshot 2024-05-29 at 07.55.42

Thanks in advance

@Aurelian_N,

It may be more consistent to use them with the field label instead of the field, especially if you use Tooltip/s with your text fields. For a start you then only have to manage how they behave with the label control.

I’ve been using them mostly with the WebToolbarButton/s and in WebListBox cells.

I will experiment a bit as well.

Kind regards, Andrew

What are you using to display the badges? Can you share a sample project?

Edit: for example, I get this:
image

Using the code from this blog: WebUIControl Badges Using Extension Methods – Xojo Programming Blog

Hello Alberto , Yes, i am using that code from the blog. and apparently it does work properly but not for the date fields .

I Put all the controls in a Canvas, maybe because of that the controls go crazy

Hi Aurelian, can you create a sample project to take a look?
In my case all 3 badges are in the same place, even with the Date Picker.

yeah, apparently i was doing the project in another project and it seems that once i copy/paste all the controls to the new project it is all messed up, so i guess i will end up maybe redoing some code and pages and see where it takes me as it seems that there are some weird things there . And the case where i got it bad and good let’s say is that i changed the SetBadge code just to accommodate the Caption on the Field, As in your case you did all the tests without caption but once you add the caption then the field space actually doubles and i realised that the badge removed on the top limit , hence the shift

Initially i did this :

Var classes() As String = Array("xojo-badge", "d-flex", "p-2", _
"border", "border-light", "bg-" + indicator)
classes.Add(If(caption.Length < 2, "rounded-circle", "rounded-pill"))

Var topOffset As Integer = 20
Var topVal As Integer

topVal = top + topOffset


Var styles() As String = Array("height: 21px", "font-size: 10px", _
"align-items: center", "color: white", "position: absolute", _
"top: " + topVal.ToString + "px", "right: " + Right.ToString + "px", _
"z-index: 10")

If caption = "" Or caption = " " Then caption = "&nbsp;"
Var html As String = "<span class=""" + String.FromArray(classes) + _
""" style=""" + String.FromArray(styles, ";") + """>" + caption + "</span>"

Var js() As String
js.Add("$('#" + control.ControlID + " .xojo-badge').remove();")
js.Add("$('#" + control.ControlID + "').append(`" + html + "`);")
control.ExecuteJavaScript(String.FromArray(js))

Which fixed that but messed the DatePicker.

It seems that there might be a bug on copy/pasting the controls over projects .

For example i took the new control, copy/paste it in the new project and the Inspector in the ide was completely messed up.

Locking disappeared, Appearance as well and Behaviour so how i fixed that, i deleted the control , re-add it on the interface and all is back . I guess i need to be careful here not to get some missing data, or corrupted controls.