How to set badge on checkbox?

[tz301]

Question

From https://nicegui.io/documentation/badge, badge can be set on button.

with ui.button('Warning!'):
    badge = ui.badge('!', color='red').props('floating')

However, when I set badge on checkbox, it seems not working. It will be set on outside context, not on target checkbox.

with ui.card():
    with ui.checkbox('Warning!'):
        badge = ui.badge('!', color='red').props('floating')

    ui.checkbox('Select')

[falkoschindler]

That's unexpected!
Try adding .classes('relative') to the checkbox element. This causes the badge to be placed relative to the checkbox rather than the card. (The way HTML elements are placed based on their CSS "position" attribute is pretty confusing, but you'll find plenty resources in case you want to know more.)

[tz301]

Hi @falkoschindler ,

Yeah, that works.

However, when I use w-full to place the container, the badge seems weird. Any attribute to set it close to the checkbox?

with ui.card().classes('w-full'):
    with ui.grid(columns=2):
        with ui.checkbox('Warning!').classes('relative'):
            badge = ui.badge('!', color='red').props('floating')

        ui.checkbox('Select')

[falkoschindler]

In your example the checkbox is pretty wide, which you can verify by adding a border or background color to ui.checkbox. You can bring it back to its original size and stay left-aligned using the "justify-items-start" class:

with ui.card().classes('w-full'):
    with ui.grid(columns=2).classes('w-full justify-items-start'):
        with ui.checkbox('Warning!').classes('relative border'):
            badge = ui.badge('!', color='red').props('floating')
        ui.checkbox('Select').classes('border')

[tz301]

Thanks!