How to add ui.chip() elements inside a ui.textarea element Without affecting its editable width?

[happybeginning1]

Question

Hello,

I have the following working code:

with ui.textarea(
    value=current_text,
    on_change=lambda e: update_info(e.value, info)
).style('background-color: #3e6a94; width:555px;').props('input-style="color: white" input-class="h-52" outlined').props('bottom-slots') as textarea_note:
    pass

Now, I want to add three ui.chip() elements inside the teatarea element, either at the top or at the bottom of this textarea, without occupying the space to its left or right. I attempted the following modification:

with ui.textarea(
    value=current_text,
    on_change=lambda e: update_info(e.value, info)
).style('background-color: #3e6a94; width:555px;').props('input-style="color: white" input-class="h-52" outlined').props('bottom-slots') as textarea_note:
    ui.chip('Text1', selectable=True, color=None)
    ui.chip('Text2', selectable=True, color=None)
    ui.chip('Text3', selectable=True, color=None)

However, this results in the ui.chip elements occupying the space to the right of the textarea.

Could someone please guide me on how to achieve the desired effect? Thanks in advance!

[falkoschindler]

Hi @happybeginning1,

You can position a row of chips absolutely inside the ui.input element:

with ui.textarea().props('outlined').classes('w-96'):
    with ui.row().classes('absolute top-0 right-0 gap-0'):
        ui.chip('Text1')
        ui.chip('Text2')
        ui.chip('Text3')

Otherwise the HTML <input> element and the three chips would be siblings, sharing the available space.

[happybeginning1]

Hi @falkoschindler,
It works perfectly. Thank you agin for the help!