im starting a new project using react, react-router and material-ui-next.
Im facing a problem that i've trying to find with no success.
table exceeds containing component boundaries
Structure is in this way
return (
<Paper>
<Fragment>
<CommonToolbar reload={getAnns} />
<Typography variant="title">Announces</Typography>
<Table className={classes.table}>
<TableHead>
styles is defined this way
const styles = {
root: {
flexGrow: 1,
padding: 10,
margin: 10
},
flex: {
flex: 1,
},
input: {
marginRight: 10
},
select: {
marginRight: 10
}
}
What im trying to achieve is a table contained on the screen, and if it exceeds the screen, the table should be horizontally scrollable, but always contained inside the Paper Component.
Any hint will be appreciated. Thanks
Regards
Can you try adding overflowX: "auto" in your paper container?
JSX:
return (
<Paper className={classes.paperContainer}>
<Fragment>
<CommonToolbar reload={getAnns} />
<Typography variant="title">Announces</Typography>
<Table className={classes.table}>
<TableHead>
Your styles:
const styles = {
root: {
flexGrow: 1,
padding: 10,
margin: 10
},
flex: {
flex: 1,
},
input: {
marginRight: 10
},
select: {
marginRight: 10
},
paperContainer: { margin: "10px", overflowX: "auto" }
}
Related
Goal:
Display all row in the in table at the same time.
Problem:
It display only 3 row at the same time in the table.
I would like to display all row at the same time without any limitation.
It doesn't work to use "height: '100%'"
Any idea?
Codesandbox:
https://codesandbox.io/s/mkd4dw?file=/demo.tsx
Thank you!
demo.tsx
import * as React from 'react';
import Box from '#mui/material/Box';
import Rating from '#mui/material/Rating';
import {
DataGrid,
GridRenderCellParams,
GridColDef,
useGridApiContext,
} from '#mui/x-data-grid';
function renderRating(params: GridRenderCellParams<number>) {
return <Rating readOnly value={params.value} />;
}
function RatingEditInputCell(props: GridRenderCellParams<number>) {
const { id, value, field } = props;
const apiRef = useGridApiContext();
const handleChange = (event: React.SyntheticEvent, newValue: number | null) => {
apiRef.current.setEditCellValue({ id, field, value: newValue });
};
const handleRef = (element: HTMLSpanElement) => {
if (element) {
const input = element.querySelector<HTMLInputElement>(
`input[value="${value}"]`,
);
input?.focus();
}
};
return (
<Box sx={{ display: 'flex', alignItems: 'center', pr: 2 }}>
<Rating
ref={handleRef}
name="rating"
precision={1}
value={value}
onChange={handleChange}
/>
</Box>
);
}
const renderRatingEditInputCell: GridColDef['renderCell'] = (params) => {
return <RatingEditInputCell {...params} />;
};
export default function CustomEditComponent() {
return (
<div style={{ height: 250, width: '100%' }}>
<DataGrid
rows={rows}
columns={columns}
experimentalFeatures={{ newEditingApi: true }}
/>
</div>
);
}
const columns = [
{
field: 'places',
headerName: 'Places',
width: 120,
},
{
field: 'rating',
headerName: 'Rating',
renderCell: renderRating,
renderEditCell: renderRatingEditInputCell,
editable: true,
width: 180,
type: 'number',
},
];
const rows = [
{ id: 1, places: 'Barcelona', rating: 5 },
{ id: 2, places: 'Rio de Janeiro', rating: 4 },
{ id: 3, places: 'London', rating: 3 },
{ id: 4, places: 'New York', rating: 2 },
];
You need to make use of autoHeight prop supported by the <DataGrid /> component, update your DataGrid component usage to this:
<DataGrid
autoHeight
rows={rows}
columns={columns}
experimentalFeatures={{ newEditingApi: true }}
/>
Reference: https://mui.com/x/react-data-grid/layout/#auto-height
I am trying to apply a condition margin to a component. This function receive prop. When the prop.children has a value I want to change the margin. I marked the section I have issues with with //issue here
const StyledTreeItem = styled((props) => (
<TreeItem {...props} TransitionComponent={TransitionComponent} />
))(({ theme }) => ({
[`& .${treeItemClasses.iconContainer}`]: {
"& .close": {
opacity: 0.3,
},
},
[`& .${treeItemClasses.group}`]: {
marginLeft: 15,
paddingLeft: 18,
borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`,
},
[`& .${treeItemClasses.label}`]: {
// issue here
marginLeft: props.children.length > 0 && 14,
},
}));
I was trying to customize my Modal with onBackButtonPress prop. To check if it worked or not, I passed a console.log to it like this:
<Modal onBackButtonPress={() => console.log('Something')}>
<NewRidesModal
//...
/>
</Modal>
But in fact, it doesn't even return anything whenever I press the Android back button.
Why is he prop not returning any value at all? Is it deprecated?
I use this library too react-native-modal and onBackButtonPress is working fine.
I face another issue, in my case onBackdropPress is not working, but after I fix my styling modal, everything working fine.
This is my example,
Modal js
import React, { Component } from 'react'
import { View, Text, Image, TouchableOpacity } from 'react-native'
import styles from '../styles/StyleComponentModalProduct'
import { withNavigation } from 'react-navigation'
import Price from '../../../assets/components/price/Price'
import Modal from 'react-native-modal'
class ComponentModalProduct extends Component {
constructor(props) {
super(props)
this.state = {}
}
render() {
return (
<Modal
useNativeDriver={true}
animationIn={'fadeIn'}
animationOut={'fadeOut'}
backdropColor={'rgba(0, 0, 0, 0.7)'}
backdropOpacity={0.5}
isVisible={this.props.showProduct}
onSwipeComplete={() => this.props.close()}
swipeDirection={['down']}
style={{ justifyContent: 'flex-end', margin: 0 }}
onBackButtonPress={() => this.props.close()}
onBackdropPress={() => this.props.close()}>
<View style={styles.container}>
<View style={styles.subContainer}>
<View style={styles.headerContainer}>
<TouchableOpacity
onPress={() => this.props.close()}
style={styles.closButton}
/>
<View style={styles.containerImageProfile}>
<Image
resizeMode={'contain'}
style={styles.imageProfile}
source={{ uri: this.props.selectedProduct.foto }}
/>
</View>
<View style={styles.containerProfile}>
<View style={styles.containerTextName}>
<Text style={styles.textName}>
{this.props.selectedProduct.nama_produk}
</Text>
</View>
<Price
value={this.props.selectedProduct.harga_beli}
style={styles.textProfesi}
/>
</View>
</View>
</View>
</View>
</Modal>
)
}
}
export default withNavigation(ComponentModalProduct)
Style Modal js
import { StyleSheet, Dimensions } from 'react-native'
import { color } from '../../../assets/styles/ColorList'
import {
responsiveHeight,
responsiveFontSize,
responsiveWidth
} from 'react-native-responsive-dimensions'
const windowHeight = Dimensions.get('window').height
const styles = StyleSheet.create({
container: {
justifyContent: 'flex-end',
alignItems: 'center'
},
subContainer: {
height: windowHeight / 2,
backgroundColor: color.whiteColor,
width: '100%',
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
paddingHorizontal: responsiveWidth(5),
paddingVertical: responsiveHeight(3)
},
headerContainer: {
justifyContent: 'center',
alignItems: 'center'
},
closButton: {
backgroundColor: '#E7E7E7',
height: 8,
width: 100,
marginVertical: 10
},
containerImageProfile: {
marginVertical: 10,
width: '100%',
justifyContent: 'center',
alignItems: 'center'
},
imageProfile: {
height: windowHeight / 3.5,
width: '90%',
borderRadius: 20
},
containerProfile: {
justifyContent: 'center',
alignItems: 'center'
},
containerTextName: {
marginHorizontal: responsiveWidth(10),
justifyContent: 'center'
},
textName: {
fontSize: responsiveFontSize(2.5),
color: color.fontColor,
textAlign: 'center'
},
textProfesi: {
fontSize: responsiveFontSize(2.5),
color: color.fontColor,
fontWeight: 'bold'
}
})
export default styles
I found out that onBackButtonPress is deprecated or it was actually removed. There should some more information about this on the documentation.
My problem is the Text result of descriptions is overlapping to each other. I do not know if this a bug, I just can't make it solve it. I tried anything about the styles but nothing works. I need help from other with different perspective. Thank you for taking time to read this.
Image of the overlapping texts:
I also get a warning about the unique key prop, just adding this issue because it might be related to my problem.
Image of the Warning key prop:
Here are my codes:
async onChangeDestination(destination) {
this.setState({ destination });
const apiUrl = `https://maps.googleapis.com/maps/api/place/autocomplete/json?key=${apiKey}
&input=${destination}&location=${this.state.focusedLocation.latitude},
${this.state.focusedLocation.longitude
}&radius=2000`;
try {
const result = await fetch(apiUrl);
const json = await result.json();
console.log(json);
this.setState({
predictions: json.predictions
});
} catch (err) {
console.log(err)
}
}
render() {
//For Prediction
const predictions = this.state.predictions.map(prediction => (
<View style={styles.descriptionContainer}>
<Text key={prediction.id} style={styles.descriptionText}>{prediction.description}</Text>
</View>
));
//For Marker
let marker = null;
if(this.state.locationChosen) {
marker = <MapView.Marker coordinate={this.state.markerPosition}/>
}
return(
<View style={styles.container}>
{/* <StatusBar backgroundColor={'transparent'} translucent={true}/> */}
<MapView
style={styles.map}
initialRegion={this.state.focusedLocation}
onPress={this.pickLocationHandler}
showsUserLocation={true}
ref={ref => this.map = ref} //For animating map movement
>
{marker}
</MapView>
{/* <TouchableOpacity onPress={this.getLocationHandler} style={styles.iconContainer}>
<Icon name="md-locate" size={30} color="blue"/>
</TouchableOpacity> */}
<TextInput
placeholder="Search for an event or place!"
style={styles.destinationInput}
onChangeText={destination => {
this.setState({destination});
this.onChangeDestinationDebounced(destination)
}}
value={this.state.destination}
/>
{predictions}
</View>
);
}
const styles = StyleSheet.create({
container: {
zIndex: -1,
alignItems: 'center',
},
map: {
height: '100%',
width: '100%'
},
iconContainer: {
position: 'absolute',
top: 60,
right: 15,
zIndex: 1
},
destinationInput: {
position: 'absolute',
zIndex: 10,
width: '97%',
top: 15,
backgroundColor: 'white',
borderRadius: 8,
padding: 8
},
descriptionText: {
color: 'black',
position: 'absolute',
zIndex: 10,
top: 60,
},
descriptionContainer: {
zIndex: 2,
position: 'absolute',
top: 20,
height: Dimensions.get('window').height,
width: Dimensions.get('window').width,
justifyContent: 'space-between'
}
})
So I haven't been able to run the code, however your descriptionText style has position: 'absolute'. The behaviour you are seeing is therefor expected, as each text is placed on the same 'absolute' position. Removing this should give you the result you want.
The key warning is thrown as your descriptionContainer View is the root element in the map function, so this should have the key. Hopefully this helps, updated source code below with a small disclaimer that I wasn't able to test it.
async onChangeDestination(destination) {
this.setState({ destination });
const apiUrl = `https://maps.googleapis.com/maps/api/place/autocomplete/json?key=${apiKey}
&input=${destination}&location=${this.state.focusedLocation.latitude},
${this.state.focusedLocation.longitude
}&radius=2000`;
try {
const result = await fetch(apiUrl);
const json = await result.json();
console.log(json);
this.setState({
predictions: json.predictions
});
} catch (err) {
console.log(err)
}
}
render() {
//For Prediction
const predictions = this.state.predictions.map(prediction => (
<Text key={prediction.id} style={styles.descriptionText}>{prediction.description}</Text>
));
//For Marker
let marker = null;
if(this.state.locationChosen) {
marker = <MapView.Marker coordinate={this.state.markerPosition}/>
}
return(
<View style={styles.container}>
{/* <StatusBar backgroundColor={'transparent'} translucent={true}/> */}
<MapView
style={styles.map}
initialRegion={this.state.focusedLocation}
onPress={this.pickLocationHandler}
showsUserLocation={true}
ref={ref => this.map = ref} //For animating map movement
>
{marker}
</MapView>
{/* <TouchableOpacity onPress={this.getLocationHandler} style={styles.iconContainer}>
<Icon name="md-locate" size={30} color="blue"/>
</TouchableOpacity> */}
<TextInput
placeholder="Search for an event or place!"
style={styles.destinationInput}
onChangeText={destination => {
this.setState({destination});
this.onChangeDestinationDebounced(destination)
}}
value={this.state.destination}
/>
{this.state.predictions && this.state.predictions.length > 0 && (
<View style={styles.descriptionContainer}>{predictions}</View>
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
zIndex: -1,
alignItems: 'center',
},
map: {
height: '100%',
width: '100%'
},
iconContainer: {
position: 'absolute',
top: 60,
right: 15,
zIndex: 1
},
destinationInput: {
position: 'absolute',
zIndex: 10,
width: '97%',
top: 15,
backgroundColor: 'white',
borderRadius: 8,
padding: 8
},
descriptionText: {
color: 'black',
},
descriptionContainer: {
zIndex: 2,
position: 'absolute',
top: 20,
height: Dimensions.get('window').height,
width: Dimensions.get('window').width,
}
})
I want to create chart like that in highcharts:
IOT Central Chart
this is what i get until now:
Highcharts.setOptions({
colors: ['#3399CF', '#F9BA06', '#65AF35', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
// Get the data. The contents of the data file can be viewed at
$.getJSON(
'https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/activity.json',
function (activity) {
$.each(activity.datasets, function (i, dataset) {
// Add X values
dataset.data = Highcharts.map(dataset.data.splice(1, 10), function (val, j) {
return [activity.xData[j], val];
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
chart: {
type: "spline",
marginLeft: 40, // Keep all charts left aligned
marginTop: 7,
marginBottom: 7
},
title: {
text: null,
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
visible: false,
labels: {
format: '{value} km'
}
},
yAxis: {
visible: true,
title: {
text: null
},
tickAmount: 2,
minPadding: 0,
lineWidth:1,
gridLineColor: "transparent"
},
series: [{
data: dataset.data,
name: dataset.name,
color: Highcharts.getOptions().colors[i],
fillOpacity: 0.3,
tooltip: {
valueSuffix: ' ' + dataset.unit
}
}]
});
});
}
);
.chart {
min-width: 320px;
max-width: 800px;
height: 150px;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
but the problem is that i cant export or zoom do normal legend to this chart.
The problem here is that you create three separate charts instead of one.
Highstock allows you to position and resize axes (height & top properties):
yAxis: [{
height: '50%'
}, {
top: '50%',
height: '50%'
}],
API references:
https://api.highcharts.com/highstock/yAxis.height
https://api.highcharts.com/highstock/yAxis.top
In fact it's going to work in Highcharts too (even though it's not documented).
Live demo: http://jsfiddle.net/BlackLabel/gb3jhq75/