Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Horizontal Form.Item using flex layout should be "nowrap" on Row style
See original GitHub issue- I have searched the issues of this repository and believe that this is not a duplicate.
Reproduction link
Steps to reproduce
Already shown in the example, to see the desired style, uncomment line 20.
What is expected?
Form using layout “horizontal” shouldn’t let form-control zone wrap, which currently uses flex-flow: row wrap;. Each horizontal row should contain its controls in the .ant-form-item-control container, which means changing style to flex-flow: row nowrap;.
What is actually happening?
See the example.
| Environment | Info |
|---|---|
| antd | 4.16.6 |
| React | 16.14.0 |
| System | macOS 11.4 |
| Browser | Chrome Version 91.0.4472.114 (Official Build) (x86_64) |
Only apply wrap in vertical layout.
Issue Analytics
- State:
- Created 2 years ago
- Reactions:1
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Mastering wrapping of flex items - CSS: Cascading Style Sheets
In this guide I will explain how this works, what it is designed for and what situations really require CSS Grid Layout rather...
Read more >flex-wrap | CSS-Tricks
The flex-wrap property is a sub-property of the Flexible Box Layout Module. It defines whether the flex items are forced in a single...
Read more >Styling: FlexLayout - Oracle
The class oj-flex can be used for a flexbox based layout. The oj-flex class is different from a default flexbox in the following...
Read more >How to Build CSS-only Smart Layouts with Flexbox - Toptal
By default, HTML block-level elements stack, so if you want to align them in a row, you need to rely on CSS properties...
Read more >Flex - Bootstrap
Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@afc163 It’s just the workaround I provided and I am using it now, and the problem won’t show when the form has enough width. But I think the
nowrapoverride is redundant on the horizontal layout, which should always make labels on the left side and controls on the right, even the controls wrap.I have the same problem, why is this closed? The answer feels like a hack.