How to align text input correctly in react native?How do I set the initial position of the textinput cursor to the top-left cornerHow to centralize text in textinputReact-Native - TextInput cursor placed in the middle instead of top in AndroidHTML text input allow only numeric inputHow do I correctly clone a JavaScript object?Vertically align text to top within a UILabelAligning text and image on UIButton with imageEdgeInsets and titleEdgeInsetsHide keyboard in react-nativeWhat is the difference between using constructor vs getInitialState in React / React Native?What is the difference between React Native and React?How to align text and Picker in React NativeComponent won't stay wrapped within bounds (React Native)Not able to navigate to other page in react native
What makes an ending "happy"?
What makes things real?
Equilibrium points of bounce/instanton solution after Wick's rotation
How can I protect myself in case of attack in case like this?
How can Schrödinger's cat be both dead and alive?
How can I finish my PhD?
2 load centers under 1 meter: do you need bonding and main breakers at both?
Was Robin Hood's point of view ethically sound?
Strategies for dealing with chess burnout?
How can faith be maintained in a world of living gods?
Are personality traits, ideals, bonds, and flaws required?
Change-due function
The meaning of "offing" in "an agreement in the offing"
When did computers stop checking memory on boot?
Why would an AC motor heavily shake when driven with certain frequencies?
Need help to understand the integral rules used solving the convolution of two functions
How to descend a few exposed scrambling moves with minimal equipment?
Does the 2019 UA artificer need to prepare the Lesser Restoration spell to cast it with their Alchemical Mastery feature?
Do you need to burn fuel between gravity assists?
What happens when a file that is 100% paged in to the page cache gets modified by another process
Why can't some airports handle heavy aircraft while others do it easily (same runway length)?
Bacteria vats to generate edible biomass, require intermediary species?
Who is the uncredited actor leading the squad in the Valerian movie?
When calculating averages, why can we treat exploding die as if they're independent?
How to align text input correctly in react native?
How do I set the initial position of the textinput cursor to the top-left cornerHow to centralize text in textinputReact-Native - TextInput cursor placed in the middle instead of top in AndroidHTML text input allow only numeric inputHow do I correctly clone a JavaScript object?Vertically align text to top within a UILabelAligning text and image on UIButton with imageEdgeInsets and titleEdgeInsetsHide keyboard in react-nativeWhat is the difference between using constructor vs getInitialState in React / React Native?What is the difference between React Native and React?How to align text and Picker in React NativeComponent won't stay wrapped within bounds (React Native)Not able to navigate to other page in react native
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
The Text input is center aligned, how to fix this text input so that it takes input from top left corner
Here is my css for text input
/* The Text input is center aligned, how to fix this text input so that it takes input from top left corner */
input:
flex: 1, padding: 4, marginRight: 1, marginTop: 5, fontSize: 18, borderWidth: 1, borderRadius: 4, borderColor: '#E6E5ED', backgroundColor: '#F8F8F9', justifyContent: 'flex-start', height: 150
javascript ios reactjs react-native
add a comment |
The Text input is center aligned, how to fix this text input so that it takes input from top left corner
Here is my css for text input
/* The Text input is center aligned, how to fix this text input so that it takes input from top left corner */
input:
flex: 1, padding: 4, marginRight: 1, marginTop: 5, fontSize: 18, borderWidth: 1, borderRadius: 4, borderColor: '#E6E5ED', backgroundColor: '#F8F8F9', justifyContent: 'flex-start', height: 150
javascript ios reactjs react-native
2
umm... align it with what? Your question doesn't specify what you're trying to do.
– Colin Ramsay
Apr 10 '15 at 11:20
1
what should i add in my css so that my text starts from the top left corner?
– Vikramaditya
Apr 10 '15 at 11:24
add a comment |
The Text input is center aligned, how to fix this text input so that it takes input from top left corner
Here is my css for text input
/* The Text input is center aligned, how to fix this text input so that it takes input from top left corner */
input:
flex: 1, padding: 4, marginRight: 1, marginTop: 5, fontSize: 18, borderWidth: 1, borderRadius: 4, borderColor: '#E6E5ED', backgroundColor: '#F8F8F9', justifyContent: 'flex-start', height: 150
javascript ios reactjs react-native
The Text input is center aligned, how to fix this text input so that it takes input from top left corner
Here is my css for text input
/* The Text input is center aligned, how to fix this text input so that it takes input from top left corner */
input:
flex: 1, padding: 4, marginRight: 1, marginTop: 5, fontSize: 18, borderWidth: 1, borderRadius: 4, borderColor: '#E6E5ED', backgroundColor: '#F8F8F9', justifyContent: 'flex-start', height: 150
javascript ios reactjs react-native
javascript ios reactjs react-native
edited Apr 21 '15 at 22:35
tbodt
12.1k4 gold badges45 silver badges69 bronze badges
12.1k4 gold badges45 silver badges69 bronze badges
asked Apr 10 '15 at 11:16
VikramadityaVikramaditya
2,6121 gold badge26 silver badges35 bronze badges
2,6121 gold badge26 silver badges35 bronze badges
2
umm... align it with what? Your question doesn't specify what you're trying to do.
– Colin Ramsay
Apr 10 '15 at 11:20
1
what should i add in my css so that my text starts from the top left corner?
– Vikramaditya
Apr 10 '15 at 11:24
add a comment |
2
umm... align it with what? Your question doesn't specify what you're trying to do.
– Colin Ramsay
Apr 10 '15 at 11:20
1
what should i add in my css so that my text starts from the top left corner?
– Vikramaditya
Apr 10 '15 at 11:24
2
2
umm... align it with what? Your question doesn't specify what you're trying to do.
– Colin Ramsay
Apr 10 '15 at 11:20
umm... align it with what? Your question doesn't specify what you're trying to do.
– Colin Ramsay
Apr 10 '15 at 11:20
1
1
what should i add in my css so that my text starts from the top left corner?
– Vikramaditya
Apr 10 '15 at 11:24
what should i add in my css so that my text starts from the top left corner?
– Vikramaditya
Apr 10 '15 at 11:24
add a comment |
7 Answers
7
active
oldest
votes
I had the same issue, but the above notes didn't solve it. There's an android-only style property textAlignVertical
that fixes this issue on multiline inputs.
i.e. textAlignVertical: 'top'
4
Does not work on iOS documentation state android only...
– jatazoulja
Mar 3 '17 at 1:49
1
is ios solved by default or does this fix work only for android ?
– dev_ter
Mar 21 '17 at 20:09
2
@dev_ter it's android-only. I think iOS is top-aligned by default, though it's been a while since I've used RN so haven't actually confirmed. Not sure if/how you'd middle-align but feel free to make a note or edit if you find out how!
– user657199
Mar 22 '17 at 14:54
5
Awesome, solved the TextInput align problem withmultiline=true
in android.
– C.Lee
May 4 '17 at 0:18
3
How it can be accepted answer iftextAlignVertical
is only for Android?
– Max
Jun 14 '17 at 6:56
|
show 4 more comments
I have found the solution that in Android, TextInput style textAlignVertical: 'top'
works. but in ios, TextInput prop multiline=true
works.
add a comment |
I had a similar use case in my iOS app, wherein the TextInput
's height was 100 and the placeholder was showing in middle. I used multiline=true
and it made the text appear from the top. Hope that helps.
add a comment |
TextInput has default padding, override it by setting:
paddingTop: 0,
paddingBottom: 0
Github Issue
add a comment |
Update 2015-07-03: multiline text inputs have now been merged:
https://github.com/facebook/react-native/pull/991
The multiline examples that ship with React Native in the UI Explorer should work as documented.
The problem you'll have is that multiline TextInput aren't working correctly yet, and the docs are misleading. Please see this Github issue:
https://github.com/facebook/react-native/issues/279
"We haven't ported that functionality to open source yet."
There is some code in that issue that gives minimal multiline functionality, so you might be able to get it working with that.
add a comment |
Just Incase you are looking for code:
<TextInput
placeholder='comment goes here!'
multiline
style=textAlignVertical:'top', ...otherStyle
/>
add a comment |
To get text aligned vertically center on both platforms use:
For android use textAlignVertical: "center"
For ios use justifyContent: "center"
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f29560065%2fhow-to-align-text-input-correctly-in-react-native%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
7 Answers
7
active
oldest
votes
7 Answers
7
active
oldest
votes
active
oldest
votes
active
oldest
votes
I had the same issue, but the above notes didn't solve it. There's an android-only style property textAlignVertical
that fixes this issue on multiline inputs.
i.e. textAlignVertical: 'top'
4
Does not work on iOS documentation state android only...
– jatazoulja
Mar 3 '17 at 1:49
1
is ios solved by default or does this fix work only for android ?
– dev_ter
Mar 21 '17 at 20:09
2
@dev_ter it's android-only. I think iOS is top-aligned by default, though it's been a while since I've used RN so haven't actually confirmed. Not sure if/how you'd middle-align but feel free to make a note or edit if you find out how!
– user657199
Mar 22 '17 at 14:54
5
Awesome, solved the TextInput align problem withmultiline=true
in android.
– C.Lee
May 4 '17 at 0:18
3
How it can be accepted answer iftextAlignVertical
is only for Android?
– Max
Jun 14 '17 at 6:56
|
show 4 more comments
I had the same issue, but the above notes didn't solve it. There's an android-only style property textAlignVertical
that fixes this issue on multiline inputs.
i.e. textAlignVertical: 'top'
4
Does not work on iOS documentation state android only...
– jatazoulja
Mar 3 '17 at 1:49
1
is ios solved by default or does this fix work only for android ?
– dev_ter
Mar 21 '17 at 20:09
2
@dev_ter it's android-only. I think iOS is top-aligned by default, though it's been a while since I've used RN so haven't actually confirmed. Not sure if/how you'd middle-align but feel free to make a note or edit if you find out how!
– user657199
Mar 22 '17 at 14:54
5
Awesome, solved the TextInput align problem withmultiline=true
in android.
– C.Lee
May 4 '17 at 0:18
3
How it can be accepted answer iftextAlignVertical
is only for Android?
– Max
Jun 14 '17 at 6:56
|
show 4 more comments
I had the same issue, but the above notes didn't solve it. There's an android-only style property textAlignVertical
that fixes this issue on multiline inputs.
i.e. textAlignVertical: 'top'
I had the same issue, but the above notes didn't solve it. There's an android-only style property textAlignVertical
that fixes this issue on multiline inputs.
i.e. textAlignVertical: 'top'
edited Apr 11 '18 at 18:48
Gianfranco P.
4,9371 gold badge31 silver badges46 bronze badges
4,9371 gold badge31 silver badges46 bronze badges
answered Mar 15 '16 at 19:35
user657199
4
Does not work on iOS documentation state android only...
– jatazoulja
Mar 3 '17 at 1:49
1
is ios solved by default or does this fix work only for android ?
– dev_ter
Mar 21 '17 at 20:09
2
@dev_ter it's android-only. I think iOS is top-aligned by default, though it's been a while since I've used RN so haven't actually confirmed. Not sure if/how you'd middle-align but feel free to make a note or edit if you find out how!
– user657199
Mar 22 '17 at 14:54
5
Awesome, solved the TextInput align problem withmultiline=true
in android.
– C.Lee
May 4 '17 at 0:18
3
How it can be accepted answer iftextAlignVertical
is only for Android?
– Max
Jun 14 '17 at 6:56
|
show 4 more comments
4
Does not work on iOS documentation state android only...
– jatazoulja
Mar 3 '17 at 1:49
1
is ios solved by default or does this fix work only for android ?
– dev_ter
Mar 21 '17 at 20:09
2
@dev_ter it's android-only. I think iOS is top-aligned by default, though it's been a while since I've used RN so haven't actually confirmed. Not sure if/how you'd middle-align but feel free to make a note or edit if you find out how!
– user657199
Mar 22 '17 at 14:54
5
Awesome, solved the TextInput align problem withmultiline=true
in android.
– C.Lee
May 4 '17 at 0:18
3
How it can be accepted answer iftextAlignVertical
is only for Android?
– Max
Jun 14 '17 at 6:56
4
4
Does not work on iOS documentation state android only...
– jatazoulja
Mar 3 '17 at 1:49
Does not work on iOS documentation state android only...
– jatazoulja
Mar 3 '17 at 1:49
1
1
is ios solved by default or does this fix work only for android ?
– dev_ter
Mar 21 '17 at 20:09
is ios solved by default or does this fix work only for android ?
– dev_ter
Mar 21 '17 at 20:09
2
2
@dev_ter it's android-only. I think iOS is top-aligned by default, though it's been a while since I've used RN so haven't actually confirmed. Not sure if/how you'd middle-align but feel free to make a note or edit if you find out how!
– user657199
Mar 22 '17 at 14:54
@dev_ter it's android-only. I think iOS is top-aligned by default, though it's been a while since I've used RN so haven't actually confirmed. Not sure if/how you'd middle-align but feel free to make a note or edit if you find out how!
– user657199
Mar 22 '17 at 14:54
5
5
Awesome, solved the TextInput align problem with
multiline=true
in android.– C.Lee
May 4 '17 at 0:18
Awesome, solved the TextInput align problem with
multiline=true
in android.– C.Lee
May 4 '17 at 0:18
3
3
How it can be accepted answer if
textAlignVertical
is only for Android?– Max
Jun 14 '17 at 6:56
How it can be accepted answer if
textAlignVertical
is only for Android?– Max
Jun 14 '17 at 6:56
|
show 4 more comments
I have found the solution that in Android, TextInput style textAlignVertical: 'top'
works. but in ios, TextInput prop multiline=true
works.
add a comment |
I have found the solution that in Android, TextInput style textAlignVertical: 'top'
works. but in ios, TextInput prop multiline=true
works.
add a comment |
I have found the solution that in Android, TextInput style textAlignVertical: 'top'
works. but in ios, TextInput prop multiline=true
works.
I have found the solution that in Android, TextInput style textAlignVertical: 'top'
works. but in ios, TextInput prop multiline=true
works.
edited Mar 28 at 7:34
answered Sep 18 '18 at 9:07
aseelaseel
881 silver badge5 bronze badges
881 silver badge5 bronze badges
add a comment |
add a comment |
I had a similar use case in my iOS app, wherein the TextInput
's height was 100 and the placeholder was showing in middle. I used multiline=true
and it made the text appear from the top. Hope that helps.
add a comment |
I had a similar use case in my iOS app, wherein the TextInput
's height was 100 and the placeholder was showing in middle. I used multiline=true
and it made the text appear from the top. Hope that helps.
add a comment |
I had a similar use case in my iOS app, wherein the TextInput
's height was 100 and the placeholder was showing in middle. I used multiline=true
and it made the text appear from the top. Hope that helps.
I had a similar use case in my iOS app, wherein the TextInput
's height was 100 and the placeholder was showing in middle. I used multiline=true
and it made the text appear from the top. Hope that helps.
answered Aug 13 '18 at 11:30
Mahendra LiyaMahendra Liya
8,16610 gold badges69 silver badges101 bronze badges
8,16610 gold badges69 silver badges101 bronze badges
add a comment |
add a comment |
TextInput has default padding, override it by setting:
paddingTop: 0,
paddingBottom: 0
Github Issue
add a comment |
TextInput has default padding, override it by setting:
paddingTop: 0,
paddingBottom: 0
Github Issue
add a comment |
TextInput has default padding, override it by setting:
paddingTop: 0,
paddingBottom: 0
Github Issue
TextInput has default padding, override it by setting:
paddingTop: 0,
paddingBottom: 0
Github Issue
answered Mar 20 at 11:32
Tarik ChakurTarik Chakur
5863 silver badges7 bronze badges
5863 silver badges7 bronze badges
add a comment |
add a comment |
Update 2015-07-03: multiline text inputs have now been merged:
https://github.com/facebook/react-native/pull/991
The multiline examples that ship with React Native in the UI Explorer should work as documented.
The problem you'll have is that multiline TextInput aren't working correctly yet, and the docs are misleading. Please see this Github issue:
https://github.com/facebook/react-native/issues/279
"We haven't ported that functionality to open source yet."
There is some code in that issue that gives minimal multiline functionality, so you might be able to get it working with that.
add a comment |
Update 2015-07-03: multiline text inputs have now been merged:
https://github.com/facebook/react-native/pull/991
The multiline examples that ship with React Native in the UI Explorer should work as documented.
The problem you'll have is that multiline TextInput aren't working correctly yet, and the docs are misleading. Please see this Github issue:
https://github.com/facebook/react-native/issues/279
"We haven't ported that functionality to open source yet."
There is some code in that issue that gives minimal multiline functionality, so you might be able to get it working with that.
add a comment |
Update 2015-07-03: multiline text inputs have now been merged:
https://github.com/facebook/react-native/pull/991
The multiline examples that ship with React Native in the UI Explorer should work as documented.
The problem you'll have is that multiline TextInput aren't working correctly yet, and the docs are misleading. Please see this Github issue:
https://github.com/facebook/react-native/issues/279
"We haven't ported that functionality to open source yet."
There is some code in that issue that gives minimal multiline functionality, so you might be able to get it working with that.
Update 2015-07-03: multiline text inputs have now been merged:
https://github.com/facebook/react-native/pull/991
The multiline examples that ship with React Native in the UI Explorer should work as documented.
The problem you'll have is that multiline TextInput aren't working correctly yet, and the docs are misleading. Please see this Github issue:
https://github.com/facebook/react-native/issues/279
"We haven't ported that functionality to open source yet."
There is some code in that issue that gives minimal multiline functionality, so you might be able to get it working with that.
edited Jul 3 '15 at 14:49
answered Apr 10 '15 at 11:44
Colin RamsayColin Ramsay
12.4k5 gold badges44 silver badges55 bronze badges
12.4k5 gold badges44 silver badges55 bronze badges
add a comment |
add a comment |
Just Incase you are looking for code:
<TextInput
placeholder='comment goes here!'
multiline
style=textAlignVertical:'top', ...otherStyle
/>
add a comment |
Just Incase you are looking for code:
<TextInput
placeholder='comment goes here!'
multiline
style=textAlignVertical:'top', ...otherStyle
/>
add a comment |
Just Incase you are looking for code:
<TextInput
placeholder='comment goes here!'
multiline
style=textAlignVertical:'top', ...otherStyle
/>
Just Incase you are looking for code:
<TextInput
placeholder='comment goes here!'
multiline
style=textAlignVertical:'top', ...otherStyle
/>
answered Jul 4 at 19:25
ishab acharyaishab acharya
3601 silver badge11 bronze badges
3601 silver badge11 bronze badges
add a comment |
add a comment |
To get text aligned vertically center on both platforms use:
For android use textAlignVertical: "center"
For ios use justifyContent: "center"
add a comment |
To get text aligned vertically center on both platforms use:
For android use textAlignVertical: "center"
For ios use justifyContent: "center"
add a comment |
To get text aligned vertically center on both platforms use:
For android use textAlignVertical: "center"
For ios use justifyContent: "center"
To get text aligned vertically center on both platforms use:
For android use textAlignVertical: "center"
For ios use justifyContent: "center"
answered Oct 15 '18 at 9:02
Artur EshenbrenerArtur Eshenbrener
8149 silver badges20 bronze badges
8149 silver badges20 bronze badges
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f29560065%2fhow-to-align-text-input-correctly-in-react-native%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
umm... align it with what? Your question doesn't specify what you're trying to do.
– Colin Ramsay
Apr 10 '15 at 11:20
1
what should i add in my css so that my text starts from the top left corner?
– Vikramaditya
Apr 10 '15 at 11:24