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?
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" />
I'm using the TextField component in multi-line mode to edit the query text (sort of like a simple code editor), but it doesn't display line numbers. Can I somehow program to show the line numbers next to it?
<TextField
className="mt-8 mb-16 mx-4"
label="Query Text"
autoFocus
id="my_query"
name="my_query"
value={form.my_query}
onChange={handleChange}
variant="outlined"
multiline
rows={16}
fullWidth
/>
I tried to use react-simple-code-editor, but it didn't work for me due to the architecture of my web application (there is no onChange event and e object, but only onValueChange - without the e event object), and my form automatically transmits changes onChange to the form. In short, react-simple-code-editor doesn't suit me.
And it would be nice if someone could suggest how to display line numbers using the standard TextField component in multiline mode from the material-ui library.
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)
The caps lock icon is popping up as an inbuilt feature of React Native - TextInput component. I would like to style this icon so I can apply the right padding to it.
No documentation on this feature, but seems to be turned on when secureTextEntry prop is true for the component.
<DefaultInputField
id="password"
placeholder="Enter password..."
label="Password"
secureTextEntry=true
/>
If you only want to apply (right) padding you could do the following.
Wrap your input field with a View and apply the border styling to the view. Apply the (right) padding to this View.
Remove the border styling from your input field and make fit perfectly within your view.
If done correctly this will visually yield the same result but you can control the right padding.