How shall make logon ui better?
my code looks like as below:with gr.Column(scale=1) as login_interface:
            # 登录部分
            username = gr.Textbox(label="Username")
            password = gr.Textbox(label="Password")
            login_btn = gr.Button("Login", variant='primary')it looks not good which means their width is too big; and I want to make it looks like as below fig:image745×472 14.3 KBhow shall I do that?
2024-10-31T04:36:02Z
Would it be something like this?with gr.Column(scale=1) as login_interface:
            # 登录部分
            with gr.Group():
                    gr.Markdown("### Login")
                    username = gr.Textbox(label="Username")
                    password = gr.Textbox(label="Password", type="password")
                    login_btn = gr.Button("Login", variant='primary')orwith gr.Column(scale=1) as login_interface:
            # 登录部分
            with gr.Group():
                    gr.Markdown("### Login")
                    with gr.Row():
                        username = gr.Textbox(label="Username")
                        password = gr.Textbox(label="Password", type="password")
                    login_btn = gr.Button("Login", variant='primary')About type=“password”:gradio.appGradio  DocsGradio docs for using
2024-10-31T04:52:35Z
thank you for your reply, but it still looks to wide as below:image1920×351 25 KB
2024-10-31T04:53:54Z
I just want to it looks not too wide as below:image1856×644 18.5 KB
2024-10-31T05:09:12Z
Like this?import gradio as gr

CSS = """
.loginform {width=50%; align-items:center; !important;}
"""
with gr.Blocks(css=CSS) as demo:
    with gr.Column(scale=1) as login_interface:
            # 登录部分
            with gr.Group(elem_classes="loginform"):
                gr.Markdown("### Login")
                username = gr.Textbox(label="Username")
                password = gr.Textbox(label="Password", type="password")
                login_btn = gr.Button("Login", variant='primary')

demo.launch()
2024-10-31T05:25:23Z
thank you; it is most what I want except one point:image1826×630 18.7 KBthere is muchgrayaround theloginui, so shall I make thegraytowhiteor delete thegray?
2024-10-31T05:29:03Z
I don’t know where this gray is coming from, so there’s no way to specify. I’ll check it out from Chrome in a bit.
2024-10-31T05:33:37Z
ok,  thanks your help.
2024-10-31T06:20:43Z
I did.CSS = """
.loginform {width=50%; align-items:center; background-color:transparent; !important;}
"""