Voila-Vuetify template creating empty space

[jcy204]

Hi all,

I am currently creating a dashboard using voila-vuetify v0.5.2 where one of the elements is an interactive pyechart wordcloud. A simplified version of the code is as follows:

from collections import Counter
import ipywidgets as widgets
import ipyvuetify as v
import lorem

from pyecharts.charts import WordCloud
import pyecharts.options as opts

WORDS = lorem.text()*100
WC = WordCloud(init_opts=opts.InitOpts(width='100%', height='200px')).add(
    series_name="Test",
    shape='diamond',
    width='100%',
    pos_top='0px',

    data_pair=Counter(WORDS.split()).most_common())

out = widgets.Output()

v.Col(_metadata={'mount_id': 'content-main'}, class_="pa-1",cols=12, md=1,children=[
    v.Card(style_='height: 210px', children=[
        v.CardText(children=[
            out
        ])
    ])
])

out.append_display_data(WC.render_notebook())

This loads nicely in the Jupyter notebook I am using, and when run with voila file.ipynb the following (desired) output is returned:

However, when I run the notebook with voila --template vuetify-default file.ipynb the output has large column of white space on the left hand side (highlighted in the page source):

Is there a way to remove this extra element that seems to have appeared in the output? Also, apologies if this isn't a bug on your side and is just a mistake on my part.

Thanks, James

[jcy204]

Not sure of the cause of the issue, but it can be fixed with: display(HTML("<style>.lm-Widget.p-Widget.jp-OutputPrompt.jp-OutputArea-prompt{display: none;}</style>"))