[🐛 BUG] Bug: Selector Control Renders Full-Width and Blocks Horizontal Alignment in Taipy 4.0.2

[cscottgraham]

What went wrong? 🤔

In Taipy 4.0.2, the selector control (e.g., <|{value}|selector|...|width=120px|> in a <|layout|> or <|part|> with flex) renders as a full-width block element, ignoring width settings (e.g., width=70px, width=120px) and preventing horizontal alignment with input controls in layouts like columns or flex. This forces selector elements to occupy separate lines, even with flex-direction:row or max-content.

Provide steps to reproduce:
Create a Taipy GUI with mixed input and selector controls, e.g.:

Wrap
Copy
from taipy.gui import Gui

first_name = ""
status = None

statuses = ["Open", "Closed", "Pending"]

page = """
<|layout|columns=2|
<|{first_name}|input|label=First Name|width=120px|>
<|{status}|selector|lov={statuses}|dropdown|label=Status|width=120px|>
|>
"""

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

Observe that "First Name" (input) stays at 120px on one line, but "Status" (selector) renders full-width on a separate line, ignoring width=120px.
Include your environment: “Taipy 4.0.2, Python 3.x, Windows 10, using pip install taipy==4.0.2.”
Mention the impact: “This limitation prevents compact, one-line layouts for forms mixing input and selector, requiring workarounds like multi-line layouts or full-width selectors.

Acceptance Criteria

• A unit test reproducing the bug is added.
• Any new code is covered by a unit tested.
• Check code coverage is at least 90%.
• The bug reporter validated the fix.
• Related issue(s) in taipy-doc are created for documentation and Release Notes are updated.

Code of Conduct

• I have checked the existing issues.
• I am willing to work on this issue (optional)

[FlorianJacta]

This is what I get:

Can you tell me what the issue is?

Also, if you want to have two columns in your layout, you should define it like that:

page = """
<|layout|columns=1 1|
<|{first_name}|input|label=First Name|width=120px|>

<|{status}|selector|lov={statuses}|dropdown|label=Status|width=120px|>
|>
"""

[cscottgraham]

Hi Florian, Thanks for your very prompt response! Here is my problem: if I run this code: from taipy import Gui first_name = "" statuses = ["Active", "Inactive", "Pending"] status = "Active" page = """ <|layout|columns=1 1| <|{first_name}|input|label=First Name|width=120px|> <|{status}|selector|lov={statuses}|dropdown|label=Status|width=120px|> |> """ if __name__ == "__main__": gui = Gui(page) gui.run(title="Taipy Layout Test", debug=True) The result is that the Selector is below the input as seen in this screenshot:https://imgur.com/a/umpNi9Q . [https://i.imgur.com/R0QShct.png?fb]<https://imgur.com/a/umpNi9Q> imgur.com<https://imgur.com/a/umpNi9Q> Discover the magic of the internet at Imgur, a community powered entertainment destination. Lift your spirits with funny jokes, trending memes, entertaining gifs, inspiring stories, viral videos, and so much more from users. imgur.com But I am trying to place the Selector on the same line as Input. It works when you use 2 input boxes as in this code: from taipy import Gui first_name = "" statuses = ["Active", "Inactive", "Pending"] status = "Active" page = """ <|layout|columns=1 1| <|{first_name}|input|label=First Name|width=120px|> <|{second_name}|input|label=Second Name|width=120px|> |> """ if __name__ == "__main__": gui = Gui(page) gui.run(title="Taipy Layout Test", debug=True) which has this result screenshot: https://imgur.com/a/eMi9EWm it seems that once you change to a different element type, it forces a new line. Thank you again for your help. Scott Graham

…

________________________________ From: Florian Jacta ***@***.***> Sent: February 24, 2025 3:13 AM To: Avaiga/taipy ***@***.***> Cc: cscottgraham ***@***.***>; Author ***@***.***> Subject: Re: [Avaiga/taipy] [🐛 BUG] <write a small description here> (Issue #2458) [FlorianJacta]FlorianJacta left a comment (Avaiga/taipy#2458)<#2458 (comment)> This is what I get: image.png (view on web)<https://github.com/user-attachments/assets/c7432a57-106f-4e84-af46-5ce36ea6e360> Can you tell me what the issue is? Also, if you want to have two columns in your layout, you should define it like that: page = """ <|layout|columns=1 1| <|{first_name}|input|label=First Name|width=120px|> <|{status}|selector|lov={statuses}|dropdown|label=Status|width=120px|> |> """ — Reply to this email directly, view it on GitHub<#2458 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/BF32GMC3GWAT3ALNIUJW6XD2RLIC5AVCNFSM6AAAAABXWNISUKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNZXGY4TAOJVGY>. You are receiving this because you authored the thread.

[cscottgraham]

Hi Florian, Thanks for your very prompt response! Here is my problem: if I run this code: from taipy import Gui first_name = "" statuses = ["Active", "Inactive", "Pending"] status = "Active" page = """ <|layout|columns=1 1| <|{first_name}|input|label=First Name|width=120px|> <|{status}|selector|lov={statuses}|dropdown|label=Status|width=120px|> |> """ if __name__ == "__main__": gui = Gui(page) gui.run(title="Taipy Layout Test", debug=True) The result is that the Selector is below the input as seen in this screenshot:https://imgur.com/a/umpNi9Q . [https://i.imgur.com/R0QShct.png?fb]<https://imgur.com/a/umpNi9Q> imgur.com<https://imgur.com/a/umpNi9Q> Discover the magic of the internet at Imgur, a community powered entertainment destination. Lift your spirits with funny jokes, trending memes, entertaining gifs, inspiring stories, viral videos, and so much more from users. imgur.com But I am trying to place the Selector on the same line as Input. It works when you use 2 input boxes as in this code: from taipy import Gui first_name = "" second_name = "" page = """ <|layout|columns=1 1| <|{first_name}|input|label=First Name|width=120px|> <|{second_name}|input|label=Second Name|width=120px|> |> """ if __name__ == "__main__": gui = Gui(page) gui.run(title="Taipy Layout Test", debug=True) which has this result screenshot: https://imgur.com/a/eMi9EWm it seems that once you change to a different element type, it forces a new line. Thank you again for your help. Scott Graham

…

________________________________ From: Florian Jacta ***@***.***> Sent: February 24, 2025 3:13 AM To: Avaiga/taipy ***@***.***> Cc: cscottgraham ***@***.***>; Author ***@***.***> Subject: Re: [Avaiga/taipy] [🐛 BUG] <write a small description here> (Issue #2458) This is what I get: image.png (view on web)<https://github.com/user-attachments/assets/c7432a57-106f-4e84-af46-5ce36ea6e360> Can you tell me what the issue is? Also, if you want to have two columns in your layout, you should define it like that: page = """ <|layout|columns=1 1| <|{first_name}|input|label=First Name|width=120px|> <|{status}|selector|lov={statuses}|dropdown|label=Status|width=120px|> |> """ — Reply to this email directly, view it on GitHub<#2458 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/BF32GMC3GWAT3ALNIUJW6XD2RLIC5AVCNFSM6AAAAABXWNISUKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNZXGY4TAOJVGY>. You are receiving this because you authored the thread.Message ID: ***@***.***> [FlorianJacta]FlorianJacta left a comment (Avaiga/taipy#2458)<#2458 (comment)> This is what I get: image.png (view on web)<https://github.com/user-attachments/assets/c7432a57-106f-4e84-af46-5ce36ea6e360> Can you tell me what the issue is? Also, if you want to have two columns in your layout, you should define it like that: page = """ <|layout|columns=1 1| <|{first_name}|input|label=First Name|width=120px|> <|{status}|selector|lov={statuses}|dropdown|label=Status|width=120px|> |> """ — Reply to this email directly, view it on GitHub<#2458 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/BF32GMC3GWAT3ALNIUJW6XD2RLIC5AVCNFSM6AAAAABXWNISUKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNZXGY4TAOJVGY>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[FlorianJacta]

Ok, I see.

Try this code:

from taipy import Gui

first_name = ""
statuses = ["Active", "Inactive", "Pending"]
status = "Active"

page = """
<|layout|columns=120px 120px 1|
<|{first_name}|input|label=First Name|width=120px|>

<|{status}|selector|lov={statuses}|dropdown|label=Status|width=120px|>
|>
"""

if __name__ == "__main__":
    gui = Gui(page)
    gui.run(title="Taipy Layout Test", debug=True)

@FabienLelaquais @FredLL-Avaiga I think this should be fixed. Inputs and selectors should have the same behavior

[cscottgraham]

Yes! That works! Thanks so much!! I was struggling for hours even using chat Gpt to find the method with no success. Thanks again! And I am truly impressed with your response time! - a rarity these days! Scott

…

________________________________ From: Florian Jacta ***@***.***> Sent: February 24, 2025 5:55 AM To: Avaiga/taipy ***@***.***> Cc: cscottgraham ***@***.***>; Author ***@***.***> Subject: Re: [Avaiga/taipy] [🐛 BUG] Bug: Selector Control Renders Full-Width and Blocks Horizontal Alignment in Taipy 4.0.2 (Issue #2458) Ok, I see. Try this code: from taipy import Gui first_name = "" statuses = ["Active", "Inactive", "Pending"] status = "Active" page = """ <|layout|columns=120px 120px 1| <|{first_name}|input|label=First Name|width=120px|> <|{status}|selector|lov={statuses}|dropdown|label=Status|width=120px|> |> """ if __name__ == "__main__": gui = Gui(page) gui.run(title="Taipy Layout Test", debug=True) — Reply to this email directly, view it on GitHub<#2458 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/BF32GMCPTDAPLYEWYL3NQ2T2RL3DJAVCNFSM6AAAAABXWNISUKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNZYGA3DGNZYGM>. You are receiving this because you authored the thread.Message ID: ***@***.***> [FlorianJacta]FlorianJacta left a comment (Avaiga/taipy#2458)<#2458 (comment)> Ok, I see. Try this code: from taipy import Gui first_name = "" statuses = ["Active", "Inactive", "Pending"] status = "Active" page = """ <|layout|columns=120px 120px 1| <|{first_name}|input|label=First Name|width=120px|> <|{status}|selector|lov={statuses}|dropdown|label=Status|width=120px|> |> """ if __name__ == "__main__": gui = Gui(page) gui.run(title="Taipy Layout Test", debug=True) — Reply to this email directly, view it on GitHub<#2458 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/BF32GMCPTDAPLYEWYL3NQ2T2RL3DJAVCNFSM6AAAAABXWNISUKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNZYGA3DGNZYGM>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[FlorianJacta]

Note to @FredLL-Avaiga @FabienLelaquais, the issue is a difference between the selector and input behavior:

Here you have the input above the selector:

from taipy import Gui

first_name = ""
statuses = ["Active", "Inactive", "Pending"]
status = "Active"

page = """
<|{first_name}|input|label=First Name|width=120px|>
<|{status}|selector|lov={statuses}|dropdown|label=Status|width=120px|>
"""

if __name__ == "__main__":
    gui = Gui(page)
    gui.run(title="Taipy Layout Test", debug=True)

and here you have the inputs side by side:

from taipy import Gui

first_name = ""
status = "Active"

page = """
<|{first_name}|input|label=First Name|width=120px|>
<|{status}|input|label=Status|width=120px|>
"""

if __name__ == "__main__":
    gui = Gui(page)
    gui.run(title="Taipy Layout Test", debug=True)

See issue: #2467