ipyvuetify: How to limit width of TextField

Question

I am trying to have an ipyvuetify Textfield for setting a one-digit number, but cannot limit the with of the text field to anything reasonable. A simple spinet of code e.g.

import ipyvuetify as v
#Textfield should be an one digit number...
v.Row(children=[v.TextField(type="number"), v.Html(tag='H1',children=['Some text here'])])

results to a huge TextField that looks ugly:

How can I set the some limit to the width of the TextField / set it so that it has max width of one character? Alternatively, is there any property I can set on vue v-TextField / vue code that would limit the size of the TextField ?

Answer 1

Adding a max-width:50px to the TextField style works.

import ipyvuetify as v
text_field_widget = v.TextField( style_ = "max-width:50px", v_model=None, type="number")
#Textfield should be an one digit number...
row = v.Row(class_ = 'mx-2',children=[text_field_widget, v.Html(tag='H1',children=['Some text here'])])
row

Answer 2

I don't think you can directly limit the width of the Textfield, it will take the max width of its parent element.

But you can put it in a parent element with fixable width:

v.Row(
    children = [
        v.Html(
            tag = 'div',
            style_ = 'width: 500px',
            children = [
                v.TextField(type = "number")
            ]
        ),
        v.Html(
            tag = 'H1',
            children = ['Some text here']
        )
    ]
)

Answer 3

Here is the best I have so far, based on Christoph's answer: I added v.Spacer, and converted the second part to a v.Col (might be worth also including the first part to a v.Col ?)

import ipyvuetify as v
v.Row(
    children = [
        v.Html(
            tag = 'div',
            style_ = 'width: 50px',
            children = [
                v.TextField(type = "number")
            ]
        ),
        v.Spacer(),
        v.Col(
            sm=3,
            tag = 'H1',
            children = ['Some text here']
        )
    ]
)