How shall make logon ui better?

Beginners
1

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:

image
image745×472 14.3 KB

how shall I do that?

1 Like
2

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')

or

with 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”:

3

thank you for your reply, but it still looks to wide as below:

image
image1920×351 25 KB

4

I just want to it looks not too wide as below:

image
image1856×644 18.5 KB

5

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()
6

thank you; it is most what I want except one point:

image
image1826×630 18.7 KB

there is much gray around the login ui, so shall I make the gray to white or delete the gray?

7

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.

8

ok, thanks your help.

9

I did.

CSS = """
.loginform {width=50%; align-items:center; background-color:transparent; !important;}
"""