Ever since AutoComplete was removed from material-ui, the list isn't scrollable. Below is a snippet from the yester years which used to work.
<ReferenceArrayInput label="Parts" source="partId" reference="parts"
allowEmpty>
<AutocompleteInput optionText="name"
options={{ listStyle: { overflow: 'auto', maxHeight: 200}}} />
</ReferenceArrayInput>
As per the new documentation of react-admin, AutocompleteInput renders a meterial-ui TextField component. Use the options attribute to override any of the TextField attributes.
I don't seem to find a way to make the list scrollable or set a maxHeight to the list.
Please help
Related
I'm using the react-native-elements ui framework with ThemeProvider and trying to globally style the text of a component like this...
<ListItem bottomDivider>
<ListItem.Title>Name</ListItem.Title>
<ListItem.Input>DoB</ListItem.Input>
</ListItem>
I want to style this <ListItem.Input> text color red. So I've tried a ton of things similar to the code below, but I can't get anything working. Any ideas?
ListItem: {
inputStyle: {
color: "red"
}
}
I'd prefer to keep the styling global and not to do it inline, if possible.
You have to use ListItemInput
ListItemInput:{
style:{}
}
I'm trying to throw together a simple phone app mockup using React Native & React Native Elements as a set of UI components. I want to set the styling of various elements to a common theme, so I'm following the example in the documentation: https://reactnativeelements.com/docs/customization#using-themeprovider.
But the trouble with the example there (as it says in the docs), it sets the style of all buttons. What I'd like to do is to set the background colour of only the solid buttons for example, leaving the clear buttons, clear! Can anyone point me in the right direction of how to do this?
Current snippet (trimmed to save space):
const myTheme = {
Button: {
buttonStyle: {
borderRadius: 4,
backgroundColor: '#03E0EE',
},
titleStyle: {
color: '#180D43',
},
},
};
...
<ThemeProvider theme={myTheme}>
<View style={styles.footerContainer}>
<Button title="Primary Button"/>
<Button title="Secondary Button" type="clear" />
</View>
</ThemeProvider>
Create a wrapper component for SolidButton and or ClearButton. Make this wrapper components consuming the myTheme context with style props (e.g. ButtonSolid\ButtonClear). AFAIK there are no selector capabilities like in css.
How can I replace the circle checkbox of a DetailsList in office-ui-fabric-react with a normal square CheckBox component? I see onRenderCheckbox so I try something like this:
onRenderCheckbox={(props) => (<Checkbox checked={props.checked} />)}
or
onRenderCheckbox={(props) => (<Checkbox {...props} />)}
I can see the square checkbox but I can't select it.
What it the proper way to do this?
Thanks in advance...
When you render the Checkbox component, it handles the click itself (and thus it won't percolate up to the row so it can toggle selection accordingly), so you need to prevent it with the pointer-events: none style.
onRenderCheckbox(props) {
return (
<div style={{ pointerEvents: 'none' }}>
<Checkbox checked={props.checked} />
</div>
);
}
Check it out here: https://codepen.io/anon/pen/zQXEPr
The release 2.1.3 of react-admin introduced the use of <Typography /> for the NumberField component (and others) in place of <span />.
This component has a style to align text on the right.
const styles = {
input: { textAlign: 'right' },
};
I don't know why, but with the span element the number was aligned left.
Now the number is aligned right, but not aligned with the same margin if there are others number fields.
Code demo (Comment show screen) / Screenshot
I tried to define a className on my component...
<NumberField source="id" className="leftalign" />
with
.leftalign {
text-align: left;
}
...but the class is overridden by the style-generated class NumberField-input-234 (except if I set !important but I would like to avoid this).
My questions are:
Is there a way to align them on the left without the uggly !important css flag or writing style={{ textAlign: 'left' }} each time I use a <NumberField />?
Is there a way to align right with the same margin?
Thanks
This issue has been resolved in react-admin#2.2.0
I have 3 ListView components inside a single ScrollView component like this:
<ScrollView>
<Header />
<ListView onEndReached={() => alert('load more 1')}/>
<ListView onEndReached={() => alert('load more 2')}/>
<ListView onEndReached={() => alert('load more 3')}/>
<Footer />
</ScrollView>
The Header component has some common content and also has 3 tabs, which trigger showing the respective ListView
The issue is any ListView with onEndReached={() => alert('load more 1')} never runs the alert, so I can never load more as I scroll down and hit the end of the listview. Remove the wrapping ScrollView and the alert runs, but the common Header doesn't scroll, since we just removed the wrapping ScrollView. The header needs to scroll with the listview, which is why I wrapped everything that needs to scroll in the ScrollView.
IMPORTANT NOTE:
I can't really use ListView with renderHeader={this.header}, for this scenario. Because, even though the Header will scroll, it will rerender the common Header and the 3 tabs for each ListView each time a ListView renders, instead of once. So a new Header rerender each time for each ListView won't cut it for the app.
Looking for a solution to this problem, where the Header scrolls with the listviews and the onEndReached is triggered for the visible ListView.
I think you're going to have to solve this by changing the dataSource in each listView in response to what header element is selected instead of loading three different ListViews.
getInitialState() {
return {
currentList: this.ds.cloneWithRowsAndSections(INITIAL_DATA);
}
},
render() {
return <ListView renderHeader={this._renderHeader} dataSource={this.state.currentList}/>
}
The only reason you wouldn't want to do this is if you wanted to maintain the scroll position in the three sub ListViews, but that wouldn't be useful because you always have to scroll to the top to change which ListView you're looking at anyway.
Then in your _renderHeader function you would render a selector that populates currentList with different data depending on the header selected.
In styling you can set it's position as relative with top:0 and left:0 . This way it will remain static on top.
<View>
<Header style={{position:"relative",top:0,left:0,height:30,width:Dimensions.get("window").width}} />
<ListView />
<ListView />
<ListView />
<Footer />
</View>
Second option which may work in scrollview is to specify height for all three ListView.
You can maybe use ScrollView::onScroll but it will be a little hacky. You will need to know the size of your listviews.
Work with ListView only
Maybe the best solution will be to play with the ListView dataSource and the onEndReached function.
If you update you dataset when ListView::onEndReached is triggered, I think you can add more elements to your ListView. This way, you do not need to do hacky things with ListViews in ScrollViews.