How to right align an image in the toolbar?

[siddmittal]

I want to show two logos and the name of the product in the toolbar in this order: Name, Left-Logo, Right-Logo. The name and Left-Logo should be left aligned and the Right-Logo should be right aligned. The GUI itself should be responsive. Below is my full working example (also creates dummy images).

Minimal Working Example:

import matplotlib.pyplot as plt
import io
import base64

from trame.app import get_server
from trame.widgets import html, vuetify, vtk as vtk_widgets
from trame.ui.vuetify import SinglePageLayout
import matplotlib.pyplot as plt

# for colorbar
import io
import base64


# -----------------------------------------------------------------------------
# Trame setup
# -----------------------------------------------------------------------------

server = get_server(client_type="vue2")
state, ctrl = server.state, server.controller

# A function to create dummy PNG images
def text_to_base64_png(text: str, width: int = 600, height: int = 200, dpi: int = 100) -> str:
    # Convert pixels to inches for figsize
    figsize = (width / dpi, height / dpi)

    # Create the figure
    fig, ax = plt.subplots(figsize=figsize, dpi=dpi)
    ax.axis('off')  # Hide axes

    # Add text at the center
    ax.text(0.5, 0.5, text, fontsize=14, ha='center', va='center')

    # Save to buffer
    buf = io.BytesIO()
    plt.savefig(buf, format='png', bbox_inches='tight', dpi=dpi)
    plt.close(fig)
    buf.seek(0)

    # Convert to base64
    img_base64 = base64.b64encode(buf.read()).decode('ascii')
    return f"data:image/png;base64,{img_base64}"


# -----------------------------------------------------------------------------Trame Related
state.trame_title = "Dummy GUI"
state.left_logo_img = text_to_base64_png("Left Logo Image", width=512, height=488)
state.right_logo_img = text_to_base64_png("Right Logo Image", width=490, height=300)
state.main_canvas_left_img = text_to_base64_png("Left Main Canvas Image", width=700, height=488)
state.main_canvas_right_img = text_to_base64_png("Right Main Canvas Image", width=700, height=488)

# -----------------------------------------------------------------------------
# GUI Layout
# -----------------------------------------------------------------------------

def build_ui():
    with SinglePageLayout(server) as layout:
        layout.title.set_text(state.trame_title)
        layout.icon.hide()

        # Toolbar
        with layout.toolbar:
            with vuetify.VRow(class_="align-center", style="width: 100%"):
                with vuetify.VCol(cols=6):
                    html.Img(src=state.left_logo_img, style="height: 80px;")
                with vuetify.VCol(cols=6, class_="d-flex justify-end"):
                    html.Img(src=state.right_logo_img, style="height: 80px;")

        # Main content
        with layout.content:
            with vuetify.VContainer(fluid=True):
                with vuetify.VRow():
                    with vuetify.VCol(cols=12, md=6):
                        html.Img(src=state.main_canvas_left_img, style="width: 100%; height: auto;")
                    with vuetify.VCol(cols=12, md=6):
                        html.Img(src=state.main_canvas_right_img, style="width: 100%; height: auto;")

# -----------------------------------------------------------------------------
# Start server
# -----------------------------------------------------------------------------

if __name__ == "__main__":
    build_ui()
    server.start()

PROBLEM:
As can be seen in the screenshot below, there are two main problems in the GUI:

1. The title is not fully visible. Three dots . . . are there in the title
2. The Right Logo Image is not right-aligned. There is some empty space in the right side.

How can I solve these issues?

[jourdain]

How did you come up with class_= attribute? It does not exist in trame. You need to use classes= like captured in the api here

[jourdain]

You can also use VSpacer() to push things on the right but that would assume you don't use the VCols...