question-mark
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.

floating label overlapping value in the release mode

See original GitHub issue

Hi,

I’m using floating label on a simple input. When I pass value to this component, it’s overlapping in the release mode, but in the debug mode Work well.

<Form style={{marginTop:50}}>
                    <Item floatingLabel last>
                        <Label>请输入您的用户名/手机号</Label>
                        <Input keyboardType={"email-address"}
                               value={this.state.username}
                               onChangeText={(username) => this.setState({username:username})}/>
                    </Item>
                    <Item floatingLabel last>
                        <Label>请输入您的密码</Label>
                        <Input secureTextEntry={true}
                               value={this.state.passward}
                               onChangeText={(passward) => this.setState({passward:passward})}/>
                    </Item>
                </Form>

<TouchableOpacity
                                onPress={() => this.props.navigation.navigate("Register",{returnData: this.returnData.bind(this)})}
                                style={{marginLeft:8}}>
                                <Text style={styles.text}>注册新账号</Text>
                            </TouchableOpacity>

 returnData(mobile, psw) {
        this.setState({username: mobile, passward: psw});
    }

wechatimg8958

react-native, react and native-base version

“native-base”: “2.3.8”, “react-native”: “0.49.3”, “react”: “16.0.0-beta.5”,

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
prionkorcommented, Jun 20, 2019

This issue is still not fixed. The related issue #627 is closed for some reason. Doesn’t anyone have fix for this?

0reactions
FKeimcommented, Feb 18, 2021

if floating label overlapped when has a value, try to set value in the constructor when are defining this.state

Read more comments on GitHub >

github_iconTop Results From Across the Web

Overlap of Input and floatingLabel in release mode ... - GitHub
When using Input with a floatingLabel on Androids release builds the Label sometimes overlaps the Text. The bug appears in release builds on ......
Read more >
Chrome autofill overlapping floating label - css - Stack Overflow
Beautifully inserting the values and works so well with animation and all. Chrome puts a kind of overlay of bulky text in the...
Read more >
Chrome autofills the Form and the floating label overlaps the ...
I am using the Telerik Form for Blazor. When the application is rendered in Chrome, the browser automatically completes the fields of the...
Read more >
Label overlaps input when loading partial page
Selecting the input field fixes this. It seems like this behavior is defined in "forms-free.js". The user-interaction events are triggered from "$(document).on ...
Read more >
Floating labels · Bootstrap v5.0
Create beautifully simple form labels that float over your input fields.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found