[Python] Change the position of image in GUI using trame and vuetify

I am new to VTK and Trame. I am trying to modify an exisiting GUI. I need to bring the vertical Colorbar on the right side of the canvas as depicted in the screenshot below. My current code which is generating the view below is here:

with layout.content:
with vuetify.VContainer(fluid=True, classes="pa-0 fill-height d-flex flex-row"):
with vuetify.VCol(
style="max-width: 70vw; margin-left: auto;",
classes="pa-0 fill-height"
):
with vuetify.VContainer(classes="pa-0 d-flex flex-column fill-height"):
html.Img(
src=("colorbar_img", ""),
style=(
"max-height: 100%; "
"max-width: none; "
"margin: 356px 0 8px 0; " # top 16px margin
"transform: rotate(270deg); "
"transform-origin: center center; "
"display: block;"
)
)

# Force canvas to grow and fill remaining height
html_view = vtk_widgets.VtkRemoteView(
renderWindow, ref="view",
style="flex-grow: 1; min-height: 0;" # Crucial for flex layouts
)
ctrl.view_update = html_view.update
ctrl.view_reset_camera = html_view.reset_camera


Question: How do I shift the colobar image (html.Img) to the right of the black canvas?



Continue reading...