Web 2.0 WebToolbar logo

Targets Web
1

Hi team!

I have a web app in Xojo 2023.4 with a webtoolbar. How do I add a 300px logo on the left?

I tried adding an image and toolbar to a container but the horizontal scroll moves the webtoolbar too. Is there a better way?

Or maybe I just need to block horizontal scrolling?

Any suggestions for me?

2

as far as I know, you can’t.
I asked for it may be two years ago. it is in the same state today.
same as a search field in the toolbar.
should be done but lots of web framework seems not finished.
if you need it, you should look into making your own websdk for it

1 Like
3

The icon property doesn’t work for you?

4

Hi Greg

I tried the icon, which did work for small icons that seemed to be limited to a square the height of the web toolbar. I need to display a wide logo. Should it work for that or is there a better way?

I am newly returning to Xojo, and I’m not ready to dive into the websdk option yet.

5

I was just checking. I thought maybe they’d changed that since I left.

6

I’ve added this Feature Request a while ago, please consider upvoting it:
#72347 - Allow WebToolbar.Icon to be bigger, or add a WebToolbar.Logo property

In the meantime, you can workaround this with some JavaScript. I’ve just attached a sample project with the workaround in the Feature Request.

3 Likes
7

Capture d’écran 2024-01-10 à 16.01.33
Capture d’écran 2024-01-10 à 16.01.332924×1954 299 KB

1 Like
8

Whoops, thanks! I’ve just uploaded it.

9

Thanks for sharing the example. Shouldn’t the other menu items be more centered/aligned as well when the logo height exceeds 30px? Or can that be done easily?
image

10

In the example, the height of the logo is forced to be 30px, so the “Testing” title should be aligned. What browser are you using so I can review it?

11

I’m using an SVG company logo in my Web2 Toolbar to set the Icon and had to make extra space in the tollbar to make it the size I wanted changing width, height and padding for the Toolbar Icon.

image
image806×211 19.5 KB

In my App HTML Header I added the following to make the space for the logo:

<style>
.navbar-brand img.d-inline-block.align-top {
	width:  150px;
	height: 55px;
	padding-right: 30px;
}
</style>
<style>
.navbar-brand
{
	font-size: 32px;
	font-weight: 700;
	padding-right: 100px;
}
</style>

This is from the module for returning the SVG logo as a Web Picture that I use to set the Toolbar Icon, tb.Icon = LoadWhiteLogo), in my session method to create the Toolbar. My bootstrapmin file I have modified to make the toolbar 90 pixels in height.

Public Function LoadWhiteLogo() As WebPicture
  If LogoWhite Is Nil Then
    
    // Open the White Logo 
    Var logoSVGFile As FolderItem = New FolderItem("C:\WebApps\Resources\jostens-logo-w.svg")
    Var svgData as string
    
    // Check to see if the file exisits and load the file into the variable svgData
    If logoSVGFile <> Nil And logoSVGFile.Exists Then
      Var t As TextInputStream
      Try
        // As SVG consists of XML-based instructions, we can read it like text
        t = TextInputStream.Open( logoSVGFile )
        t.Encoding = Encodings.UTF8
        svgData = t.ReadAll
      Catch e As IOException
        MessageBox("Error accessing the SVG")
      End Try
      t.Close
    end if
    Logo_Wht_svgData = svgData
    
    LogoWhite  = new WebPicture
    LogoWhite.MIMEType = "image/svg+xml"
    // important to make the picture available to all sessions of the running app
    LogoWhite.Session = Nil
    LogoWhite.Data = Logo_Wht_svgData
    
  End If
  
  Return LogoWhite
End Function
4 Likes
12

I was using Edge

13

If you look at the code in my sample below you can modify the App HTML Headers and change the padding to the right of the icon and that will modify where the other menus begin. Also you add a flexible space so that menus are right justified or you can add the Flexible space after first adding menus and then the remaining menus you add will be right justified. I did it that way on my toolbar example for Login, Prefs and Logs buttons with Icons.

// Add a flexible space so that icon buttons are right justified
Var flexspace As New WebToolbarButton
flexspace.Style = WebToolbarButton.ButtonStyles.FlexibleSpace
tb.AddItem(flexspace)

image
image1713×137 23.3 KB

I also added a label below the toolbar with a specific background to show the page name “Dashboard” in the Label’s shown event.

me.Style.Value( "background" ) = "linear-gradient(#3c6eb6, #264673 50%, #15253f)"
14

Thanks for sharing, nicely done! I will certeinly have a look at you example.