I cannot remove underline in input text
I guess it should be
underlineColorAndroid="transparent"
See the related issue https://github.com/facebook/react-native/issues/10108
Use underlineColorAndroid property of TextInput component
<TextInput underlineColorAndroid='transparent'
placeholder="type here ..">
TXT
</TextInput>
Following prop in TextField works for me
underlineColorAndroid='rgba(0,0,0,0)'
I found another way to surcharge InputContainer styles directly on the TextInput :
inputContainerStyle={{borderBottomWidth:0}}
I found a simple solution
underlineColorAndroid='#FFF'
I agree with above answers but it produces following problem randomly
https://github.com/facebook/react-native/issues/18214
NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)
So i get up with other solution. I added editbox style in style.xml
<item name="android:background">#android:color/transparent</item>
---------------------------Full code------------------------------------
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:windowBackground">#color/backgroundcolor</item>
<item name="android:editTextStyle">#style/AppEditTextStyle</item>
</style>
<style name="AppEditTextStyle" parent="#style/Widget.AppCompat.EditText">
<item name="android:background">#android:color/transparent</item>
<item name="android:minHeight">40dp</item>
</style>
underlineColorAndroid="transparent" is perfectly working for me
<TextInput
underlineColorAndroid="transparent"
placeholder="Your Placeholder"
/>
See Discussion here
Following prop in TextField works for android 6 to up
underlineColorAndroid='transparent'
Following prop in TextField works for android 6 to down
borderWidth={0}
so you should both props to work in every devices
underlineColorAndroid='transparent'
borderWidth={0}
If you're still looking for a solution and underlineColorAndroid='transparent' doesn't do the trick then try autoCorrect={false}.
Example :
<TextInput autoCorrect={false} underlineColorAndroid='transparent' placeholderTextColor={Colors.gray} style={styles.input} autoCapitalize='characters' placeholder="Type your word" />
I found only one way to remove underline exactly from input container:
<TextField
placeholder="user#gmail.co"
InputProps={{ disableUnderline: true }}
/>
Related
I am creating a dashboard in react with FLuentUI. I have a row of textBoxes and they are just not lining up - as you can see. Can someone give me a starter please on how to line these up :
As you can see the 'Enter text here is not straight with the others. here is my react code.
return (
<div style={{ fontSize: FontSizes.size42 }} className="ms-Grid" dir="ltr">
<ProducingBroker currency={currency} setCurrency={setCurrency} />
<BrokerContact currency={currency} setCurrency={setCurrency} />
<OriginalInsured currency={currency} setCurrency={setCurrency} />
<ReinsuredName currency={currency} setCurrency={setCurrency} />
<label>{mailboxitem.itemId}</label>
</div>
I know I need to put some styling around it, just need a starter please.
I would like to apply the style to Formik's tag for react. How can I do?
<ErrorMessage name="email"></ErrorMessage>
I try with component={Custom} but don't work.
I use Tailwindcss.
Thanks if you want to help me.
To add a class to a React component, use className="theClass". Formik's ErrorMessage.component property takes a value of a custom component, e.g. component={Custom} as you have, or it can take an HTML container, e.g. component="div". Assuming this is not a Tailwind port to React, "div" is appropriate. Putting these two together, you can apply Tailwind-style invalid message styling thus:
<ErrorMessage name="emailAddress" component="div" className="text-red-500 text-xs italic" />
<ErrorMessage name="field name" component="div" className="some classes" />
add "component" field for ErrorMessage component
This method worked for me in react..
<ErrorMessage name='email' render={msg => <div className="error">{msg}</div>}/>
then, call that className in the CSS file
.error{
color: red;
}
CODEPEN: https://codesandbox.io/s/94lw648lmo?fontsize=14
I have been using Material-ui with react.
I'm trying to make a list that contains long text.
When long text is given text is shown like the picture but, I want multiline text.
Here is my code snippet of it.
<List>
{this.props.novels.map((novel, index) => (
<ListItem alignItems="flex-start" key={index} role={undefined}>
<ListItemText primary={<span>{novel.text}</span>} />
<ListItemSecondaryAction>
<Button>
<ThumbUp />
</Button>
<span>{novel.like}</span>
<Button>
<ThumbDown />
</Button>
<span>{novel.dislike}</span>
</ListItemSecondaryAction>
</ListItem>
))}
</List>
Please let me know if you need more info.
Thanks.
Accepted answer did not work for me, here is what worked:
<ListItemText
primary={tooLongTitle}
primaryTypographyProps={{ style: { whiteSpace: "normal" } }} />
you can add the following CSS to your cell:
word-wrap: break-word;
Hope it helps
I'm new to js, react and css so this is going to be very basic but it's not to me. I have these containers and I'm trying to put a text field inside one of them but I'm getting syntax error at Text. Does it have something to do with < > />? Thank you
<View style={styles.top}
/>
<MapView style={styles.map}
region ={{
latitude:lat,
longitude:long,
latitudeDelta: 0.1,
longitudeDelta: 0.1,
}}
>
</MapView>
<View style={styles.bottom} />
</View>
);
Indeed it does. You need to close your jsx View tag.
<View style= {styles.container}>
<View style={styles.top}>
<Text> Hi there</Text>
</View>
</View>
The render method can only render a single root node i.e you only define one parent root in render method.
You can define multiple child root under one parent.
I'm using Meteor + ReactJS and I'm pulling Material-UI via node modules.
<RadioButtonGroup name="shipSpeed" defaultSelected="not_light">
<RadioButton value="light" label="Simple" style={styles.radioButton} />
<RadioButton value="not_light" label="Selected by default" style={styles.radioButton} />
<RadioButton value="ludicrous" label="Disabled" disabled={true} style={styles.radioButton} />
</RadioButtonGroup>
Here is what it renders.
But it won't change values like it's supposed to do on click. It just stays static.
Check the below example. You have to pass valueSelected and onChange props to RadioButtonGroup to get the values of RadioButton. In onChange function set the selected value in state and pass that state to valueSelected that’s all. As simple as that.
<RadioButtonGroup
valueSelected={this.state.cranRadio}
onChange={this.handleCRAN}
style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between" }}
name="coin"
defaultSelected="not_light"
>
<RadioButton
value="Yes"
label="Yes"
inputStyle={styles.inputStyle}
style={{ width: "auto" }}
labelStyle={{ marginLeft: "-10px" }}
/>
<RadioButton
value="No"
label="No"
style={{ width: "auto" }}
inputStyle={styles.inputStyle}
labelStyle={{ marginLeft: "-10px" }}
/>
</RadioButtonGroup>;
I maybe having similar issue with Checkbox.
If i provide a handler, then the checkbox is not showing 'tick' when checked. Without handler, the check shows with ripple effect.
import mui from 'material-ui';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
...
<mui.Checkbox
label="Employed"
name="Employed"
labelPosition="left"
style={fstyles.checkbox}
onCheck={props.cb}
/>
If I dont provide the onCheck, then the check shows.. should the handler return some value? currently it sets my top level component's state . I tried returning true, but did not help.