input field length

[figoyouwei]

Hi, yesterday, forget one small thing `

Input field

with tgb.layout("1", class_name="text-center pb1"):
    with tgb.part(class_name="card"):
        tgb.input(
            label="Question",
            value="{userquery}",
            hover_text="What you want to know?"
        )

` how to change the length of tgb.input?

[AlexandreSajus]

You can use class_name = "fullwidth" to expand the input:

with tgb.layout("1", class_name="text-center pb1"):
    with tgb.part(class_name="card"):
        tgb.input(
            label="Question",
            value="{userquery}",
            hover_text="What you want to know?"
            class_name="fullwidth"
        )

You can change the values in layout if you want to control the size:

with tgb.layout("3 1", class_name="text-center pb1"):
    with tgb.part(class_name="card"):
        tgb.input(
            label="Question",
            value="{userquery}",
            hover_text="What you want to know?"
            class_name="fullwidth"
        )

[figoyouwei]

fullwidth is ok, but right now it looks like this

The code is ` # Input field with tgb.layout("2 1", class_name="text-center pb1"): with tgb.part(class_name="card"): tgb.input( label="Question", value="{userquery}", class_name="fullwidth", hover_text="What you want to know?"
)

# Input button
with tgb.layout("1", class_name="text-center pb1"):
    with tgb.part():
        tgb.button(
            "Ask",
            on_action=call_qa, 
            class_name="text-center"
        )`

So how to center the card and make the button wider?

[AlexandreSajus]

Here is an example that works:

main.py:

from taipy.gui import Gui
import taipy.gui.builder as tgb

userquery = ""

def call_qa():
    return None

with tgb.Page() as page:
    with tgb.layout("2 1", class_name="text-center pb1"):
        with tgb.part(class_name="card"):
            tgb.input(
                label="Question",
                value="{userquery}",
                class_name="fullwidth",
                hover_text="What you want to know?",
            )
            with tgb.layout("1", class_name="text-center pb1"):
                with tgb.part():
                    tgb.button("Ask", on_action=call_qa, class_name="ask_button")

if __name__ == "__main__":
    Gui(page=page).run()

main.css:

.ask_button {
    padding: 0.25em 5em;
}

[figoyouwei]

main.css works fine. It seems to have some problem after being dockerized. I need to confirm this again, strange...