Easy bootstrap buttons in more areas

There’s a number of areas where icons aren’t yet supported (i.e. WebButton) or are supported but in a limited way (i.e. WebMenuItem) - Maybe you want more than one icon or icons at the end versus the start?

Remember there’s the Raw Tag to allow you to inject HTML in many more places, which can be coupled with the Data attribute of the WebPicture’s BootstrapIcon’s Helper Function:

    me.caption = "<raw>"+str(WebPicture.BootstrapIcon("alarm fill",color.Red).Data)+"</raw>"

You may want wrap the SVG in an additional div with classes for CSS formatting but it depends on the use case and your bootstrap theme. Hopefully this helps someone, it did for me :smiley:

==========
For WebMenuItem I found putting it in a span with position absolute allowed it to align correctly:
<span style="position: absolute;">

For WebButton I found wrapping in this helped:
<span style="position: inherit;top: -3px;">
Also wrapping it in a div for WebButton will make it be on a new line and make a “tall” button

I’ll also note that while you could wrap it in an image tag and use the url link:
<img src="/_files/9393-3533-3537-4621-7927/alarm-fill.svg" width="16" height="16" class="align-middle">
But this creates a worse experience as it takes an extra network call for the image to load - meaning it doesn’t load as fast and the image may appear to pop into view after a delay versus the SVG data route which renders it instantly and allows more granular control for potential CSS effects and DOM manipulations.

6 Likes

I’m getting tired of putting all of your posts in OneNote :slight_smile:

From now on, when I have a Web 2.0 design question, I am going to refer here first:

Brock’s Posts

Thanks for all of your informative posts!

5 Likes

Hi Brock,

Where can we get list of Bootstrap Icon?

2 Likes

Wouldn’t it be great if someone were to create a documented sample project with all of Brock’s little tidbits that would get updated weekly and emailed to us :wink:

Maybe a for nominal subscription fee?

I definitely provide these for the community as a courtesy and for collaboration, but can’t say I’m not adverse to any free will donations (@neonash7777 Venmo/CashApp haha) - but certainly not required. I just hope these help some of you out especially during the interim - until Xojo can get the rest of the Web2.0 features fully baked. I’m really looking forward for additional layout types with hopefully good WYSIWYG support

Brock, I thank you for all your contributions. Where I’m coming from is as a part time developer for corporate productivity applications in a graphics/printing company. I’m a bit disappointed in the usability of web 2.0 at this point and your slew of tips and tricks is hard to keep up with without some organization. I’d gladly pay a fee to subscribe to a weekly update or pay a small fee to download an updated project for quality documented examples so I don’t waste time researching and experimenting. Even better, adding the ability for taking requests for solutions to specific challenges would be a superb addition to a subscription plan because from my perspective I’m stuck in web 1.0 at this point without some assistance. I’d make a list of my complaints but I don’t think Xojo will respond with an update in a timely fashion and there may be alternative solutions that your expertise can resolve to help make the transition less painful. I’m wondering how many people would pony up for some plan you might be able to put forth that helps unlock the power of Web 2.0 without having to wait for Xojo to do the work to make it easy sometime in the distant future? I have a corporate credit card and I’m not afraid to us it.