I have this long descriptions in my React-admin :
I would like to set a substring on this field like this : .substring(0, 50)} + "..." but I don't know where to do this. Anyone know ?
Try the sx prop:
<Datagrid>
<TextField source="title" />
<TextField source="description" sx={{
maxWidth: '20em',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}} />
</Datagrid>
More details at https://marmelab.com/react-admin/Fields.html#sx
Related
I'm using the native base picker package for react-native.
I want to disable some items but, enable disable params don't work, all elements are still selectable.
I'm testing the app in ios. Here's my code
import { Picker } from 'native-base';
<Picker
iosHeader="VALUES"
mode="dropdown"
style={{ margin: 0, padding: 0 ,width:180,color:"#fff", justifyContent:"center",alignItems:"center" , textAlign:"center" }}
placeholder="Select one"
placeholderStyle={{ color: "#fff" }}
placeholderIconColor="#fff"
headerBackButtonText="Back"
headerStyle={{ backgroundColor: "#ff705a" }}
headerTitleStyle={{ color: "white" }}
headerBackButtonTextStyle={{ color: "white" }}
selectedValue={this.state.selectedVal}
onValueChange={(value) => this.onchange(value)}
textStyle={{ textAlign:"center" }}
textStyle={{color:"#fff"}}
>
<Picker.Item value='' label='Select' />
<Picker.Item label="SELECT ONE" value="34" />
</Picker>
The Picker component was officially replaced with Select in the update of v2 to v3 of NativeBase. Hope this still helps you! I wasnt able to get the Picker component to work on Expo Snack ¯_(ツ)_/¯
Below is an example I found in the docs. By adding the isDisabled prop to <Select.Item /> for C and Java. This prop prevents the ability to choose these options on iOS and Android. In my testing this did not work on Web.
<Select
selectedValue={value}
_selectedItem={{
bg: "red.600",
endIcon: <CheckIcon size={5} />,
}}
>
<Select.Item label="JavaScript" value="js" />
<Select.Item label="TypeScript" value="ts" />
<Select.Item label="C" value="c" isDisabled />
<Select.Item label="Python" value="py" />
<Select.Item label="Java" value="java" isDisabled />
</Select>
Full working code example in Snack here
this is my code for react-native picker.
I want to get all values for that json array which is selected.
I want to provide multiple select.
<Picker
mode="dropdown"
style={styles.droplist}
selectedValue={this.state.mode}
onValueChange={this.funcValueChanged}>
<Picker.Item label="Select Company" value="Select Company" />
{
this.state.data.map((item, key) => (
<Picker.Item
label={item.Co_Name + ' (' + item.CompCode + ')'}
value={key}
key={key}
/>
)))
}
</Picker>
You can use for single/multiple selection
import DropDownPicker from 'react-native-dropdown-picker';
<DropDownPicker
items={getAllStates}
searchable={true}
searchablePlaceholder="Search for an item"
searchablePlaceholderTextColor="gray"
placeholder="Select States"
placeholderTextColor={"grey"}
multiple={true}
multipleText="%d items have been selected."
containerStyle={{ marginTop: 8, marginBottom: 8, width:
"92%", alignSelf: "center", }}
onChangeItem={item => {
}
} />
The package used here is #react-native-picker/picker which does not support the multi-selected.
GitHub Issue
Use npm i react-native-multiple-select instead.
I'm trying to delete the top, right and left borders of my textInput (so obviously, I'd like to have just the bottom border :) ) with the package react-native-autocomplete-input
I tried borderTop : 0 / and 'transparent' but it's not working I still have the borders on top and sides.
borderStyle didn't work either
I get this:
https://zupimages.net/viewer.php?id=20/03/ovck.bmp
my code is this:
<ScrollView style={styles.containerScroll}>
<Text style={styles.h1}>{i18n.t("tripsform.title")}</Text>
<Autocomplete
containerStyle={styles.container}
inputContainerStyle={styles.inputContainer}
autoCapitalize="none"
autoCorrect={false}
data={this.findAirports(query_arrival)}
defaultValue={this.findAirports(query_start)}
onChangeText={text => this.setState({ query_start: text })}
placeholder="Enter Start airports"
renderItem={({ airport }) => (
<TouchableOpacity
onPress={() => this.setState({ query_start: airport })}
>
<Text style={styles.h2}>{airport}-</Text>
</TouchableOpacity>
)}
/>
<Autocomplete
containerStyle={styles.container}
inputContainerStyle={styles.inputContainer}
autoCapitalize="none"
autoCorrect={false}
data={this.findAirports(query_arrival)}
defaultValue={this.findAirports(query_arrival)}
onChangeText={text => this.setState({ query_arrival: text })}
placeholder="Enter Arrival airports"
renderItem={({ airport }) => (
<TouchableOpacity
onPress={() => this.setState({ query_arrival: airport })}
>
<Text style={styles.h2}>{airport}-</Text>
</TouchableOpacity>
)}
/>
<Form ref={c => (this._form = c)} type={Trip} options={options} />
<Text>{"\n"}</Text>
<Text>{"\n"}</Text>
<Button
containerStyle={[styles.mybtnContainer]}
style={styles.mybtn}
onPress={this.handleSubmit}
>
{i18n.t("tripsform.item.add").toUpperCase()}
</Button>
<Button
onPress={() => this.props.navigation.navigate("MyTrips")}
containerStyle={[styles.mybtnContainer]}
style={styles.mybtn}
>
Return to my trips
</Button>
<Text>
{"\n"}
{"\n"}
</Text>
</ScrollView>
with this style:
inputContainer: {
minWidth: 300,
width: "90%",
height: 55,
backgroundColor: "transparent",
color: "#6C6363",
fontSize: 18,
fontFamily: "Roboto",
borderBottomWidth: 1,
borderBottomColor: "rgba(108, 99, 99, .7)"
},
If I can get any help that's really nice, thanks for reading and for any help !
You need to use inputContainerStyle property to apply styles to the input.
You can also use containerStyle to style the container around the AutoComplete so you also don't need to wrap the Autocomplete with View tag.
<Autocomplete
inputContainerStyle={styles.inputContainer}
/>
This Should give you the desired output :) :
<Autocomplete
inputContainerStyle={{width:"100%",borderBottomWidth:1}}
inputStyle={{borderWidth:0}}
data={Options}
handleSelectItem={(item,id)=>optionHandler(item.value,id)}
valueExtractor={item => item.value}
/>
It seems that it's impossible with that package.
I could do what I wanted to do with 'native base autocomplete'.
So, it doesn't completely answer the question but it allows you to do the right thing!
You can set the inputContainer style borderWidth to 0:
// other styles
inputContainer: {
borderWidth: 0,
},
the following code doesn't give me desired result
<View style={styles.sectionContainer}>
<Text>Crash type</Text>
<Picker
selectedValue={this.state.crash_type}
style={{borderBottomWidth:1, borderBottomColor: '#cc0000'}}
onValueChange={(itemValue, itemIndex) =>
this.setState({crash_type: itemValue})
}>
<Picker.Item label="select..." value="" />
<Picker.Item label="Mogok" value="mogok" />
<Picker.Item label="Kecelakaan" value="keelakaan" />
<Picker.Item label="Lainnya" value="lainnya" />
</Picker>
</View>
basically I want to have a picker with a thin underline. the style is just works fine in another input type.
please advice, any help would be appreciated. thanks a lot.
I am following this link https://www.npmjs.com/package/react-native-material-textfield
But, I didn't get the Exact showing that input and When i was enter in Text not Showing in this filed.
Please Find Out my Issue
Here this my Code:
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<TextField style={{ opacity: 0 , marginLeft: windowSize.width / 1.4, color: 'red' }}
label='Phone number'
textColor={'red'}
value={this.state.userName}
labelHeight={40}
disabled={false}
labelPadding={1}
Bottom padding= {8}
labelHeight={32}
multiline={true}
blurOnSubmit={true}
//characterRestriction={10}
onChangeText={(data) => this.setState({ userName: data })}
/>
</View>
I want like this showing in given text filed in above link like that...