[Text Field] Horizontal scroll when label is too long

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

If the label is too long, it affects the view of mobile clients (Android and Iphone)

Source Code:

<Row>
<Col>
<TextField
    id="vereinsmitgliedschaftsprozente"
    label={'THIS IS A VERY LONG LABEL AND THIS IS THE PROBLEM WHY THE SCREEN ON MOBILE DEVICES WILL BE EXPANDED'}
    value={user.vereinsmitgliedschaftsprozente}
    error={vereinsmitgliedschaftsprozenteerror}
    type="number"
    fullWidth={true}
    onChange={( event ) => {
        const tempUser = cloneDeep( user );
        tempUser.vereinsmitgliedschaftsprozente = +event.target.value;
        setUser( tempUser );
        setvereinsmitgliedschaftsprozenteerror( event.target.value.trim().length === 0 );
    }}
    margin="none"
/>
</Col>
</Row>

On Android or Iphone it looks like this:

but it is possible to scroll to the right:

because the label is too long and not shortened:

Side information: Row and Column is from the library reactstrap.

Expected behavior 🤔

The label should not expand the website

Steps to reproduce 🕹

Steps:

1. Open this codesandbox example: Example
2. You have to open this in a new window. Open this in a new window:
3. When the new window is opened - go to the developer tools and go to responsive design - switch to iphone or any other android device

THE SOLUTION

The css is wrong: When you delete the “float” attribute it works as expected.

Context 🔦

No response

Your environment 🌎

No response

[Paul6552]

@RedHeadphone The label is not the faulty one. The legend has no overflow:hidden. See initial post -> solution picture “legend” does not have overflow:hidden

[RedHeadphone]

Can I submit PR?