Textarea with solo style

[guimillet]

Description

Textareas with solo style are incorrectly displayed with voila-vuetify, the width is too large:

Reproduce

import ipyvuetify as v
solo1 = v.Textarea(solo=True, v_model='Solo')
solo2 = v.Textarea(solo=True, v_model='Solo')
tf1 = v.Textarea(v_model='Default')
tf2 = v.Textarea(v_model='Default')
v.Container(
    _metadata={'mount_id': 'content'},
    children=[
        v.Row(children=[solo1, solo2]),
        v.Row(children=[tf1, tf2])
    ]
)

Render with vuetify-base template.

Expected behavior

In comparison, there is no issue in Jupyterlab or with voila lab template:

Context

• voila version 0.2.16
• Operating System and version: Ubuntu 20.04.3 LTS
• Browser and version: Chrome 94.0.4606.54

Troubleshoot Output

        voila                     0.2.16             pyhd8ed1ab_0    conda-forge
        voila-vuetify             0.5.2              pyhd8ed1ab_0    conda-forge

Command Line Output

Paste the output from your command line running `voila` here, use `--debug` if possible.

Browser Output

Paste the output from your browser Javascript console here.

If using JupyterLab

• JupyterLab version: 3.1.14

Installed Labextensions

.../.local/share/jupyter/labextensions
        jupyter-vuetify v1.8.1 enabled OK
.../conda/share/jupyter/labextensions
jupyter-vue v1.6.0 enabled OK
[...]

[guimillet]

The problem also occurs with the outlined style:

The width of the v-input__slot section remains equal to that of the parent v-input__control whatever the padding of v-input__slot, hence the overflow (with the lab template, width+padding of v-input__slot = width of v-input__control).

Similar issue with a Container inside a Container.

Another issue, which may not be related, is that the scroll bar on the right is always present.

[ahmadpgh]

@guimillet Did you manage to resolve this issue? I have a very similar problem with having scrollbars on popup dialogs and off margins/padding for them

[mariobuikhuizen]

Looks like the styles we remove because they were giving a lot of conflicts, aren't removed any more, because they are part of index.css in later versions of Voila. See: https://github.com/voila-dashboards/voila-vuetify/blob/c21ab33afdda6810d6799553b9922cfb8b38c14b/share/jupyter/nbconvert/templates/vuetify-base/util.js#L223 .

I think it's also the cause for #ipyvuetify/200

In the case of this issue, this rule is setting the wrong boxing model:

*,
*::before,
*::after {
 box-sizing: unset;
}

Setting it to the correct boxing model in dev-tools restores the right rendering: