i'm trying to make inside padding of textarea but can't do it. another poeblem is inside textarea when i start writing something it always go a single long long line doesn't make new line. Can anyone there who can help me by letting me know the two properties?
I have attached a screenshoot left one is given design and right one is i've made.
set multilne to true
<TextInput multiline={true} />
and for padding, set style={{padding: 10}}, like this
<TextInput multiline={true} style={{padding: 10}} />
Also write textAlignVertical="top" otherwise the placeholder will be positioned in the center, finally write like this
<TextInput multiline={true} style={{padding: 10}} textAlignVertical="top" />
Working Example
Related
I am trying to add a solid line in TextField multiline of mui, but i don't know how to do it.
The result I want:
The result I want
This is what I have
textfield.
My code looks like this:
<TextField
multiline
rows={2}
name='address'
variant='standard'
label="Địa chỉ"/>
This is possible with custom styling of the textarea, the first thing i'm thinking of is two lines which are going to be absolute positioned and the container of the textarea is going to be relative for this lines, the distance between the top and the bottom line is going to be the line height of the row.
I am playing around with React Components and I came across this website that goes over different ways to use Form Control with bootstrap styling. I want to create a text area that dynamically changes in size when user presses enter, but with the following exercise a scroll bar gets added. I could just change the number of rows, but is there a way to make the text field change in size every-time a user creates a new line
<Form.Group controlId="exampleForm.ControlTextarea1">
<Form.Label>Example textarea</Form.Label>
<Form.Control as="textarea" rows={1} />
</Form.Group>
React bootstrap examples
Thank you for your time and answer
This package would have the behavior you are looking for: react-textarea-autosize
For making it bootstrap-like, I'd suggest adding a bootstrap css className to this component (more info):
<TextareaAutosize className="form-control" />
This is from a Udacity flashcard project. Say I have this screen:
A "Next card" button appears conditionally upon the user hitting "Correct" or "Incorrect" (a value gets set in component state and the button is rendered conditional on that value being true):
All of this content is inside a <View> with alignItems: 'center' and justifyContent: 'center', so when the button appears, everything shifts slightly along the vertical axis.
I'd like to create some kind of "blank" placeholder that will have the exact same size as the "Next card" button and have it "render" before the Correct/Incorrect button is hit, so that this shift does not occur.
I recognize I could set a hard height/width on the button and make some kind of placeholder item with the same size, but this is a general question and I'd like to leave appearance to device defaults as much as possible.
Is this possible, and/or a sensible approach? If not, why not, and what would you suggest instead?
Thank you!
I assume you're doing something like this to render the Next Card button.
{this.state.answerSubmitted && (
<TouchableOpacity>
<Text>Next Card</Text>
</TouchableOpacity>
)}
Instead, you could do something like this, your button will be there, just not visible and clickable.
<TouchableOpacity
disabled={!this.state.answerSubmitted}
style={{opacity: this.state.answerSubmitted ? 1 : 0}}
>
<Text>Next Card</Text>
</TouchableOpacity>
If you already have a style for the button, you can use the array notation.
style={[styles.yourStyle, {opacity: this.state.answerSubmitted ? 1 : 0}]}
I have a screen that has a large image with a text input and a button at the bottom. This screen essentially has three requirements:
When the user taps into the input, the input and button should be visible above the keyboard
The user should be able to tap the button to submit the text input
If the user taps anywhere outside of the input (including the button) the keyboard should be dismissed.
I've tried various solutions including using react-native-keyboard-aware-scroll-view but none of them work quite right. This particular library seems to eat taps, so you can't submit on the button press. Otherwise it's good.
The closest I've been able to come is by surrounding various screen elements with <TouchableWithoutFeedback onPress={Keyboard.dismiss}>. When I try to wrap the entire screen contents in <TouchableWithoutFeedback>, <KeyboardAvoidingView> stops working.
<KeyboardAvoidingView behavior="padding">
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<Image source={require('./img.png')} />
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View>
{error}
<Text>Search</Text>
<TextInput
value={this.state.search}
onChange={this.handleChange}
/>
<TouchableHighlight onPress={this.handleSubmit}>
<Text>SEARCH</Text>
</TouchableHighlight>
</View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
This is the closest to a working solution, but it still has several problems. First of all, there doesn't seem to be way to add any additional height to KeyboardAvoidingView, so in some cases the button doesn't show above the keyboard. Second, in some cases if the screen is too tall the area underneath the button won't dismiss the keyboard on tap because there's nowhere to put a <TouchableWithoutFeedback> to hide it.
Is there a better way to display things to the user while the keyboard is up while allowing them to tap to dismiss the keyboard and still interact with some controls?
well I was able to solve this by adding
<KeyboardAwareScrollView
ref="scroller"
keyboardShouldPersistTaps={true}
>
I am using react js to develop my web application and I am using React material design for the UI. Below is the url which I am referring.
https://material-ui-next.com/
I am trying to achieve something like this
I am using the tabs but I can't get a two line text as like the image I shared. either I can use image and label or if the label is too big then it goes in multi line. How can I achieve two line text as like the image
In order to make multiline text, you can insert the HTML < pre > tag, from which the text formatting is retained. Then it remains to inherit the style of the text.
<Typography>
<pre style={{ fontFamily: 'inherit' }}>
{content}
</pre>
</Typography>
It's an old question, but I see nobody has answered it yet.
In order to get multi line and multi styles for your tab label, you need to place your labels and values in two different items. (make sure you wrap them in a div first)
The preferred way in MUI #1.0.0 is to use the <Typography /> tag.
Check out the typography docs for all the variants.
So it would look something like this:
<Tab
value={this.state.value}
label={
<div>
<Typography variant="caption">
Following
</Typography>
<Typography variant="title">
58
</Typography>
</div>
}
/>
However since all your tabs need that, you should probably create a function to take care of that.
I have created a sandbox based on the MUI example provided here: https://codesandbox.io/s/vw6107rv3