buttons vs checkboxes behaviour in ipyvuetify different. Why?

Question

I am arranging some ipyvuetify components as follows:

import ipyvuetify as vue
vue.Col(children=[vue.Checkbox(label='A'),vue.Checkbox(label='C'),vue.Checkbox(label='D')])
#and 
vue.Col(children=[vue.Btn(label='A', children=['A']),vue.Btn(label='CS', children=['C']),vue.Btn(label='D', children=['D'])])

the appear as follows:

Why is that so if both are columns (vue.Col) and only the checkboxes appear actually in a column?

thanks

Answer 1

The buttons are inline elements, not blocks. If you specify that these buttons should behave as HTML blocks, then they also display as column:

vue.Col(
    children = [
        vue.Btn(
            block=True,
            label='A',
            children=['A']
        ),
        vue.Btn(
            block=True,
            label='CS',
            children=['C']
        ),
        vue.Btn(
            block=True,
            label='D',
            children=['D']
        )
    ]
)