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.

text Align :'right' doesn't work for placeholder when multiline is true

See original GitHub issue

In my code i have 2 textInputs, one has one line and the other has multiple lines, the input is arabic so i have to enable textAlign: ‘right’, my problem is when i set multilines to true, the placeholder text remains on the left side of the text input, any idea how to solve this? my code is the following:

View:

               ` <View  style={{ position: 'relative' }}>
                    <TextInput
                        style={forms.textInput}
                        value={this.state.telephone}
                        placeholder={'رقم هاتفك'}
                        placeholderTextColor={'rgba(0,0,0,0.6)'} 
                        onChangeText={(val) => this.setState({telephone: val}) } />
                    <Icon name="android-phone-portrait" size={27} color="rgba(0,0,0,0.6)" style={{ position: 'absolute', top: 10, right: 24 }}/>
                </View>
                <View  style={{ position: 'relative' }}>
                    <TextInput
                        style={[forms.textInput,{height: 120}]}
                        multiline={true}
                        value={this.state.desc}
                        numberOfLines={4}
                        placeholder={'اقتراحك'}
                        placeholderTextColor={'rgba(0,0,0,0.6)'} 
                        onChangeText={(val) => this.setState({desc: val}) }/>
                    <Icon name="ios-help-outline" size={27} color="rgba(0,0,0,0.6)" style={{ position: 'absolute', top: 10, right: 24 }}/>
                </View>`

Style:

               `
                   textInput: {
                               height: 40, 
                               borderColor: 'rgba(0, 0, 0, 0.4)',
                               borderWidth: 2,
                               margin: 15,
                               marginTop: 5,
                               backgroundColor: '#fff',
                               color: 'rgba(0, 0, 0, 0.9)',
                              paddingRight: 40,
                               textAlign :'right'
                             },
                            `
screen shot 2016-05-04 at 10 10 04 am

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:5
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
adamskicommented, Jun 24, 2016

I would also like to raise this issue. I have centrally aligned TextInputs, one of them being multiline - the placeholder does not respect the centre alignment in the multiline TextInput.

0reactions
shergincommented, Mar 30, 2017

Therefore, as I can see from the screenshots, we can also have this another much more complicated RTL-related issue.

Read more comments on GitHub >

github_iconTop Results From Across the Web

text Align :'right' doesn't work for placeholder when multiline is ...
I have actually made a pull request for this which has been accepted and will be in the 0.29.0 release of react-native. My...
Read more >
align-content - CSS: Cascading Style Sheets - MDN Web Docs
The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's ...
Read more >
Text in Compose - Jetpack - Android Developers
The textAlign parameter allows to set the alignment of the text within a Text composable surface area. By default, Text will select the...
Read more >
TextInput - React Native
A foundational component for inputting text into the app via a keyboard. ... will not be applied if multiline=true .
Read more >
Styling Placeholder Text with CSS | SamanthaMing.com
Because placeholder text is disappearing in nature, it can strain your user's short term memory · Without labels, users cannot check their work...
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