Allow alignment for ui.text

[huangxin168]

Is your feature request related to a problem? Please describe

I am using HO2 wave to make a web app which need to collate the text to captured subtile images:

but textbox dont have a centered alignment option yet.

Describe the solution you'd like

Need start/end/center alignment options for text input applications.

Describe alternatives you've considered

(A clear and concise description of any alternative solutions or features you've considered.)

Additional context

Add any other context or screenshots about the feature request here.

[mtanco]

While being implemented, you can use html as needed:

from h2o_wave import main, app, Q, ui


@app('/')
async def serve(q: Q):

    q.page["form"] = ui.form_card(
        box="1 1 4 4",
        items=[
            ui.text("TEST"),
            ui.text("<center>TEST</center>"),
        ]
    )

    await q.page.save()

[huangxin168]

@mtanco Thanks for you suggestion on ui.text! but how for a ui.textbox?

[mtanco]

@mturoci looks like the interest is ui.textbox rather than text.

@huangxin168 can you share if you would like the textbox to be in the center of a card or if you would like the text itself to be in the center of a textbox (this second one seems a little unusual to me)

[huangxin168]

@mtanco I would like the text itself to be in the center of a textbox(the second one)

[mturoci]

Hm... we will probably not support alignment for ui.textbox. It would be odd if ui.textbox had suddenly different alignment than the rest of form elements (dropdowns, comboboxes etc.)

However, if you really want it, you can use custom CSS to style it the way you want. See: https://wave.h2o.ai/docs/examples/meta-inline-stylesheet/ for an example.

Leaving the issue open though as ui.text alignment might be of interest to other people.

[huangxin168]

@mturoci Thanks for you suggestion. style = ''' textarea { text-align:center; } ''' page['meta'] = ui.meta_card(box='', stylesheet=ui.inline_stylesheet(style))

[mturoci]

For anyone willing to contribute:

• Find the file that requires the change.
• Add a new align attribute with possible values 'start' | 'end' | 'center' | 'justify'.
• Run make generate from the root of the project.
• Make alignment work.
• Test your changes against a custom python example.
• Update docs.