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.
Related
Using a basic
<TextField
key={givenName.name}
name={givenName.name}
value={givenName.value}
error={!!givenNameError}
helperText={givenNameError}
onChange={this.handleChange}
variant={'outlined'}
label={<Trans>Given Name</Trans>}
required
fullWidth={true}
disabled={isProcessing}
/>
from Material UI and the labels see to have a fixed "opening" when it shrinks. Using a outlined box and the label length is much less than half the width of the input. Any ideas?
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" />
So this should be simple but I don't see a clear answer.
The labels I have looks like this:
.
As you can see the bottom 2 fields have the label on top since they have a default value whereas the top on "ML Features" does not and the label moves to the middle of the TextField.
The code looks like this:
<TextField
label="ML Features" // or any other field
...
>
</TextField>
How can I keep the label always on the top?
You can set shrink to true in InputLabelProps. For more reference, see InputLabel API here.
<TextField label="ML Features" InputLabelProps={{ shrink: true }} />
you need to add focused
so that it will be in top without any value
I'm working with Material UI to create the UI for the web application I'm designing. After placing some TextFields within a Grid using theme spacing, I'm having troubles with the inner text of the the TextField no longer being centered within its container. As soon as I remove the theme spacing from the style applied to the TextField, there's no problem anymore.
Here's a codesandbox that showcases the problem: https://codesandbox.io/s/nice-sound-vjsm4?file=/src/App.js
Does anyone know how to recenter the text within its TextField? Thanks.
Try Moving the textInput class to Grid instead of TextField.
<Grid item xs={6} className={classes.textInput}>
<TextField
id="project-client"
label="Client"
variant="outlined"
/>
</Grid>
If you inspect and see the HTML, it seems that Material-UI doesn't apply that class to the label but only to the input. Moving the class at grid level should apply it to the entire container (label and input)
I have a div with 2 text boxes.
<div>
<input ... />
<input ... />
</div>
Issue is they get displayed below each other.
NOTE: I am not using React-Native, not using Flex.
How can I place them next to each other ?
Answer 1: Use Flexbox (or grid which is even more powerfull). Both of these are very powerful and wonderfully adaptive to the screen.
Answer 2: Use the hack that was used to do this before, using float. Give each of the input elements a style of float: left and add one div after with a css styling of clear: all, which will make it so the parent div has the correct height.