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
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)
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:
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:
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.
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.
(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”.
Thank you for your advice, it is always appreciated.
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 ?
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.
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 = " "
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.
