Web 2.0 Toolbar, (navbar), Iconsize - How to change in CSS?

Targets Web
1

I continue my struggle to modify a canned bootstrap.min.css, (bootswatch Spacelab), To suit my needs. I think I have the colors/gradient issue licked for the Navbar and buttons. I’ve also been able to modify the Navbar height to be 95 pixels but for the life of me I can’t seem to be able to adjust the Brand Icon size to be larger than 30x30 pixels. It appears that The control will resize whatever icon I throw at it, (Me.Icon = IconName), to have a max witdth/height of 30 pixels even if it is a rectangular icon. I’ve searched the web for clues but there is very little about brand icons that isn’t being done in the HTML rather than the CSS, which of course Xojo is using. Has anyone had any luck with resizing the default brand icon size in CSS?

2

Bumping because of no replies. Does anyone have a suggestion on resizing the default brand icon size in bootstrap.min.css??

Additionally, is there a way to prevent the toolbar from stretching from edge to edge or allow a control to the be to the left of the toolbar or above the toolbar?

3

It seems to be - currently - a ‘by design’ thing. No matter what “height” you set for the webtoolbar in the IDE it seems to reset back to 58px at build time - in my testing. The button icons all seem to be hard coded to 24x24 pixels. Inside the button DIV there is a span then img tags - neither have a class assigned for CSS manipulation. The img tag specifically has a height and width attributes set = “24” (again not CSS). You are correct (in your first post) that the toolbar control will resize (on the client browser) as the icon images resize (I tested this by using the Google page inspector and manually adjusting those img attributes back to my icon size of 64x64), although the padding is a bit crazy. This though should be able to be modified through CSS bootstrap.min.css has .nav-link padding for the buttons and .navbar padding around all buttons for the toolbar.

I started out my post saying - currently - because I don’t know what the plans are as Web 2.0 evolves and these controls are modified with properties and styles in the future. To me, the control feels unfinished. I suppose we’d just have to file a feedback request and let them classify it as something that is in the works, by design, or bug.

4

Thanks for your input Jim. I pretty much have stopped even trying to use the toolbar and Web 2.0 altogether because I’m unable to use it satisfactorily. I’m more than willing to re-write my apps but not until I can successfully achieve the functionality that I have in Web 1.0. I can’t even cobble together something similar because managing control styles are just too cumbersome.

5

@Tom_Dixon
Though I would wish it would be easier to do this from within the IDE, it is not too complex making your requirement work with some CSS. I hope it might help you too.

1 Like
6

Thanks so much Jeannot! Now I think I’ll go back and revisit Web 2.0 again based on these bogs of yours. If I can successfully convert one of my apps to look and work the way I want I’ll be a happy camper.

Still, like you I think this ought to be easily accomplished in the IDE UI.

1 Like
7

Yes, but in all fairness to you Xojo my understanding is that they are already working on this but that it needs some more time but we all know the Xojo mantra “It’s ready, when it is ready” :wink: .

I wish you all success!

1 Like
8

I just tested it in a Web 2.0 test app I was playing with when R1 and Web 2.0 came out. This looks superb! Many, many thanks for this solution. I’m now re-energized to use Web 2.0 again!

1 Like
9

Jeannot,

Any chance you know how to enable the search form field in the toolbar? It is supposed to be supported in the bootstrap navbar, but I have not found a way to enable it within the Xojo framework.

FYI, I have been playing with your settings for the bootstrap logo combined with loading it as an SVG and I’m also changing the Brand font size weight and some padding to get the navbar to look the way I want it.

.navbar-brand img.d-inline-block.align-top {
width: 150px;
height: 55px;
padding-right: 30px;
}

.navbar-brand
{
font-size: 32px;
font-weight: 700;
padding-right: 100px;
}

10

Hi Tom,

Yes, with CSS we can only change what the framework provides us, and that’s not yet a search functionality (WebToolbarButton — Xojo documentation). It’s probably possible to “inject” it via some JavaScript, but that would be more call for @Anthony_G_Cyphers, @Brock_Nash, or other JavaScript experts. But as you would need to respond to events of that search box it sounds to me that you would need some plugin via the WebSDK. But I only looked a bit into this. I am not even sure if you can manipulate specifically the navbar via the WebSDK. So I’m leaving the stage for the experts on this topic.

11

Yes, you’d more-or-less need to create a WebSDK component. I have plans to add the search field to GraffitiToolbar for Web 2.0, I just haven’t gotten around to reworking that component yet.

1 Like