I'm trying to fix Chart's height value but with responsive container it move in dependency with customLegend. So result is when Legend has got few elements (low height value) LineChart become bigger and vice versa. Many elements in Legend => small LineChart height
<div
style={{
width: "100%",
paddingBottom: 30,
maxHeight: 1200
}}
>
<ResponsiveContainer width={"100%"} minHeight={650} >
<LineChart height={300}
data={DataSet}
margin={{ right: 30}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="sold" />
<YAxis />
<Tooltip wrapperStyle={{ fontSize: 12 }} />
<Point..../>
<Brush height={25} />
<Legend chartHeight={300}
content={renderLegend}
wrapperStyle={{ paddingTop: 20 }}
align={"left"}
/>
</LineChart>
</ResponsiveContainer>
</div>
So I tried to put fixed height everywhere as documented in API, but it didn't work. Without height param chart not displayed at all. What's wrong with my CSS?
v1.8.5
Related
I am trying to create a dynamic image list where I can change the number of images that are being displayed, where the images have to occupy the max space in the component without change the image ratio and also without make the component scrollable. The following images show the result that is expected:
Although what really happens now is, in the first case, with only 2 images, it overflows the parent component due to the spacing added between the flexbox elements.
For the 6 images example, it goes worst:
It overflows the parent even more because it ignores the component's max height and always tries to occupy the max width possible.
To reach the correct behaviour, I'm hard coding the flex-basis of the image list for each case because it is a flex item, and only that way does it not grow more than it should. Although, that is not desirable because I want to make the images grow as much as possible without depending on the screen size.
I do not understand why they ignore the parent's max height.
I do not understand why they do ignore the max height of the parent.
Main component:
<>
<Grid
container
direction="column"
wrap="nowrap"
rowSpacing={1}
sx={{ alignSelf: 'flex-end', margin: 0, height: '100%', justifyContent: 'flex-end' }}
>
<Grid
container
wrap="nowrap"
item
sx={{
alignSelf: 'flex-start',
flex: '1 0 auto',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<CustomImageList ref={ref} />
</Grid>
<Grid item>
<CustomPagination onClick={keyMap.move} />
</Grid>
<Grid width="100%" item>
<Stack
spacing={1}
direction="row"
sx={{
overflowX: 'auto',
justifyContent: 'space-between',
'& .MuiFormControl-root': { marginTop: '1px' },
}}
divider={<Divider orientation="vertical" flexItem />}
>
{Buttons.map((button) => (
<Stack spacing={1} flex={1} key={button.buttonId}>
<Stack direction="row" spacing={1}>
{button.text ? (
<ButtonText button={button} />
) : (
<Button />
)}
</Stack>
<Stack spacing={1} direction="row">
<ButtonBox button={button} />
</Stack>
</Stack>
))}
</Stack>
</Grid>
</Grid>
</>
The component CustomImageList is sketch like the next code:
<>
<Stack justifyContent="center">
<IconButton
ref={leftArrowRef}
size="large"
onClick={(e) => {
e.preventDefault();
handleClick({
key: 'ArrowLeft',
keyCode: 37,
});
}}
>
<ArrowBackIosNewIcon />
</IconButton>
</Stack>
<ImageList
sx={{
height: '100%',
alignContent: 'center'
}}
cols={imageColumnCount}
>
{images.map((image, index) =>
createOrdinaryListItem(image, index)
)}
</ImageList>
<Stack justifyContent="center">
<IconButton
onClick={(e) => {
e.preventDefault();
handleClick({
key: 'ArrowRight',
keyCode: 39,
});
}}
ref={rightArrowRef}
size="large"
>
<ArrowForwardIosIcon />
</IconButton>
</Stack>
</>
The ImageList component is a MUI ImageList
What would be the best approach to create the scenario shown in the first and second figures? I have already tried to create my component. It was a flexbox where I used the breakpoint from the grid to distribute the columns across the images. I had the same behaviour that I presented here.
Sorry about the verbose post and kinda "hard to understand" question, but I was not capable of creating a runnable script to show what is aforementioned
I'm trying to make the interactive content of cells in ag-grid accessible to screen readers and keyboard only users.
Is there a configuration setting or technique in ag-grid that will allow keyboard only navigation to interact with buttons and links within the cells? The headers and filters allow CONTROL + RETURN keys to change the focus to their content but not the body cells.
I've created an example grid on Plnkr with columns that have both a link and a button. Any hints or suggestions would be awesome!
We're using ag-grid-community 25.1.0 and ag-grid-react 25.1.0.
https://plnkr.co/edit/8qDxw4GYnqdvjtAU
```
<div style={{ width: '100%', height: '100%' }}>
<div
id="myGrid"
style={{
height: '100%',
width: '100%',
}}
className="ag-theme-alpine"
>
<AgGridReact
modules={AllCommunityModules}
frameworkComponents={{
medalCellRenderer: MedalCellRenderer,
totalValueRenderer: TotalValueRenderer,
linkCellRenderer: LinkCellRenderer,
}}
defaultColDef={{
editable: false,
sortable: true,
flex: 1,
minWidth: 100,
filter: true,
resizable: true,
}}
onGridReady={onGridReady}
rowData={rowData}
>
<AgGridColumn field="athlete" />
<AgGridColumn field="year" cellRenderer="linkCellRenderer" />
<AgGridColumn field="gold" cellRenderer="medalCellRenderer" />
<AgGridColumn field="silver" cellRenderer="medalCellRenderer" />
<AgGridColumn field="bronze" cellRenderer="medalCellRenderer" />
<AgGridColumn
field="total"
minWidth={175}
cellRenderer="totalValueRenderer"
/>
</AgGridReact>
</div>
</div>
```
You can accomplish this by using custom cell renderers and tapping into it's refresh lifecycle method as well as the grid's onCellFocus callback.
https://codesandbox.io/s/focus-links-7b6yz
I'm trying to align the label and the radio button inside a FormControlLabel component so that the label consumes the same width regardless of the text inside of it. Here's what it currently looks like:
Here's the code I have:
<RadioGroup row>
<FormControl>
<FormControlLabel
value={first_column_day}
control={
<Radio
value={first_column_day}
/>
}
label={<Typography variant={"subtitle2"}>{first_column_day}</Typography>}
labelPlacement="start"
/>
</FormControl>
<FormControl>
<FormControlLabel
value={second_column_day}
control={
<Radio
value={second_column_day}
/>
}
label={<Typography variant={"subtitle2"}>{second_column_day}</Typography>}
labelPlacement="start"
/>
</FormControl>
</RadioGroup>
I tried adding justifyContent for FormControl:
<FormControl style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
I also tried wrapping Typography in a div:
<div><Typography variant={"subtitle2"}>{first_column_day}</Typography></div>
But those didn't work. So far the only thing that worked is adding a fixed width to the Typography like so:
<Typography style={{ width: 75 }} variant={"subtitle2"}>{first_column_day}</Typography>
But I don't really like doing that because it's not responsive. Setting the width to 100% doesn't work either.
You can add min-width to FormControlLabel component if you need alignment like below without losing responsiveness -
Working Sandbox here - https://codesandbox.io/s/material-demo-3u8i2?file=/demo.js
I have tried all things to align vertically an icon and a text, Code:
<Danger color="secondary" style={{ flex:1,justifyContent: "center",alignItems: "center" }}>
<ErrorOutline
className={classes.warning}
/>
<text numberOfLines={1} style={{ textAlignVertical: "center" }}>
The last job was canceled
</text>
</Danger>
Things that I've tried : display, justifyContent, alignItems, flex, flexDirection, etc.
Any advice? Thanks!
Try out this inside render of react code
<div style={{display: 'flex', lineHeight: '40px'}}>
<img src="https://png.icons8.com/ios/50/000000/user-male-circle-filled.png" height="40"/>
<div>Welcome User!!!</div>
</div>
And for clear understanding you can find the entire React code for this particular example in this link: https://jsfiddle.net/r6yLmu8t/
You need to give lineHeight for the div tag in which the image/icon and text are there. And make sure that the icon/image height is equal to the lineHeight given to the div.
Hope this will achieve your need of text and icon to be on the same line and text to be at centre of icon/image
<Button light>
<View style={{flexGrow: 1, justifyContent:'center', alignItems: 'center'}}>
<Icon name='arrow-back' />
<Text>Back</Text>
</View>
</Button>
This is how I'm showing my image in React-Native:
<View>
<Text style={styles.myTitle}> This is the title 2 </Text>
<Image
style={{ width: null}}
source={require('./images/05.jpg')}
resizeMode="stretch"
/>
</View>
With the resizeMode="stretch" The Image is shown like this:
The same image when displayed with resizeMode="contain" :
<View>
<Text style={styles.myTitle}> This is the title 3</Text>
<Image
style={{ width: null}}
source={require('./images/05.jpg')}
resizeMode="contain"
/>
</View>
resizeMode="contain":
I want the image to be displayed like how it is in the second type, but there are unnecessary margins:
The margins in the first image are perfect but the full image is not shown. I always thought contain will take care of that but it's not helping here. All I want is the entire image to be shown without any extra margins.
Please help. Thanks.
You can use cover, but it will crop part of the image.
To make it work you will need to add a height property to your image:
<View>
<Text>This is the title 3</Text>
<Image
style={{ width: null, height: '100%' }}
source={require('./image.png')}
resizeMode="cover"
/>
</View>