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.
Related
I'm making a sidebar for my project and I'm using div transitions to give a smooth effect on collapse. However I have Material-ui (v4.12.3) TextField inside, and during the transition of opening the div, the height of the text field changes to 496px. Adding maxHeight style doesn't prevent a limit and once you interact with the field, it returns to normal (16px). Has anyone had this interactions with transition and mui text fields before?
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 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 TextInput components in my React Native app, and when I added secureEntryText: 'true' for the password input, I noticed two things:
1) As I'm typing the password, the left edge of the typed password shifts out and to the left of the input box, as shown here:
2) When I unfocus the password input, the typed password has an ellipsis at the end, no matter how long the password is, as shown here:
Does anyone know how I can approach fixing either of these problems?
I do not know the answer for the first question, but the ellipsis won't show once TextInput's property textAlign is set to anything but 'auto'.
Example:
<TextInput secureTextEntry={true} textAlign={'center'} />
The styles for forms can be a little wonky. For example, when this happened to me, the width of the form field was only that of the typed text. The more you typed, the more it would drift to the left:
Setting the input styles to flex:1 will not only fix the disappearing secureTextEntry issue, but also allow you to click anywhere in the input to focus instead of just on the text. You would think that react would have this style as a default prop but it does not:
<TextInput style={{flex:1}}></TextInput>
This is what I currently have:
<TooltipHost
content="Enter claim name in a way to be understandable for all parties."
directionalHint={DirectionalHint.rightCenter}
calloutProps={{ calloutMaxWidth: 100}}
>
<TextField />
</TooltipHost>
The tooltip is shown on hover. I want it to be exclusively shown on focus.
Is there a way to do it without controlling it with state?
The host automatically adds it to hover and focus. If you want focus only you'd need to use the Tooltip control itself and manually show it on focus.