evblurbs/react-native-md-textinput

Android text cutoff on top

TechGuyVN opened this issue ยท 10 comments

Thanks for great plugin,
I got an error on android, TextInput seem tobe cut off at the top like this:

screenshot_2016-09-15-12-10-22_com teraadmin

Please help me sove this.

I am not sure what happens in iOS but through changing the styles in TextField.js file to this:

const styles = StyleSheet.create({
  wrapper: {
    paddingTop: 20,
    paddingBottom: 7,
    position: 'relative'
  },
    denseWrapper: {
        paddingTop: 18,
        paddingBottom: 4,
        position: 'relative'
    },
  textInput: {
    fontSize: 16,
        height: 42,
        lineHeight: 34,
    paddingBottom: 3
  },
    denseTextInput: {
        fontSize: 13,
        height: 27,
        lineHeight: 24,
        paddingBottom: 3
    }
});

I would be interested by a screenshot of what happens in iOS with those settings.

f0rr0 commented

Does not work for me. Just increased texInput height to 42. That works :/

If I increase the TextInput height then the text that goes to the top (like 'name') gets cut off. I however tried putting the value of dense as true and it works for now.

I had the same issue, and I found a solution below, this works for me, put it in textinput style:

padding: 0,
margin: 0,
borderWidth: 0,

I managed to just use margin to push it down again.
Strangely enough I used a positive top margin and it went down to the correct position.

@MelonDeng clued me into it. I only needed to add paddingTop: 0, paddingBottom: 0 to fix it for a raw text input in react-native. I also have padding set on the left and right and it still works, but also no margins set at all

Thanks @MelonDeng! It's 2019 and we're still having to add such hacks... Jeez!

I had the same issue, and I found a solution below, this works for me, put it in textinput style:

padding: 0,
margin: 0,
borderWidth: 0,

Thanks @MelonDeng this works for me. :)

I had the same issue, and I found a solution below, this works for me, put it in textinput style:

padding: 0,
margin: 0,
borderWidth: 0,

You saved my day!

I had the same issue none of the above worked fixed by changing zIndex value