import Image from 'next/image';
<Image src={meuItem.ImageUrl}
width={310}
height={260}
style={{ width: '310px', height: '260px' }} />
For some reason it seems like the next/image component from nextjs doesn't respect the width and height property.
The only way I could get it to work was to add a style property and set the width and the height with that.
It's strange becuase if I remove the the properties from the Image component, nextjs throughs an error, saying that it is expecting those properties.
So if you have to put them in, then why doesn't it actually apply them?
I'm trying to show an image in react native with resizeMode=cover but I want to chop off the bottom not the top.
Currently this is what I have and it chops off the top:
<Image
source={myState.pictureSource}
style={{
resizeMode: 'cover',
height: 200,
width: '100%',
}}
/>
EDIT with more info:
On a phone with a small width my image renders like this.
On a tablet with a wider width my image renders with the guys head chopped off like this. When I posted the question I wanted to push down the image so his head would be visible.
However, after thinking it through, maybe I should have just kept a fixed aspect ratio instead.
If you want to make sure the image is fully visible you can use resizeMode: 'contain' instead of resizeMode: 'cover'.
cover will stretch or cut your image to fit the container. So the only thing you can really control here is the container.
in my angular project I added router animations and they work fine except for a major lag which in my view is caused by the viewport loosing it's height: 100% css setting durring the animation keyframes.
as a result it first starts by drawing a scrunched-down version of the current view to replace the current view, animate that switching to a scrunched up view of the component coming into view, then redraw the new view it just loaded with it's actual height value, and it tries to do all that within a couple milliseconds.
If the views each have a hard-coded height (for example : height: 200px, in which case it doesn't depend on the parent to know what it'll look like in the end.), then the animation doesn't lag because then it only has to draw the "sliding to right" frames of the view it currently has + the view it's loading.
so it's really the height property being lost that's causing the lag.
the thing is I need the 100% height as I use that to obtain a content that resizes dynamically if the content above the router-outlet changes size.
how do I get to keep both height: 100% and router-animations?
Relative sizes are not working well if there is other content like headers or footers. If the other content has a dynamic height, try the following in your router transition:
style({ position: 'absolute', width: '100%', top: '10%', bottom: '0' })
That way the animation should work without any lag.
I'm trying to create a custom collapsable legend for my data visualization app. It uses react and recharts. the component renders nicely the first time. But when I collapse the legend and reopen it, the responsive container doesn't shrink to fit. This would be easier if I knew the size of the parent container in pixels but I don't have that information on render. Is this a bug with recharts or flex box or am I doing it wrong?
Heres the code: https://codesandbox.io/s/8krz9qjk52
Clarification: The problem is that when I close and then open the legend, the legend component gets pushed out of the viewing area and the chart does not shrink back to the original smaller size.
It seems rather hacky but a viable fix is to set width to 99% with a height or aspect ratio.
<ResponsiveContainer width="99%" aspect={3}>
See this issue:
https://github.com/recharts/recharts/issues/172
I know this is a really old issue, but I'm posting here just in case somebody else lands here via Google.
I don't know why this works, but setting position: absolute on .recharts-wrapper will fix this issue entirely. So far I have found no downsides to this, but YRMV.
Since I'm having similar problems in my project, I decided to stick with this question. I was finally able to get a working solution!
codesandbox
I'll list the changes I made from biggest to smallest:
I lifted state up
from CustomLegend to CustomChart.
Now, CustomChart is in charge of what happens. It passes visibility information to CustomLegend as a prop. How does CustomChart know when to change state?
CustomChart has a member function called handleButtonClick that sets its state. handleButtonClick is sent to CustomLegend as a prop. So CustomChart renders CustomLegend like this:
<CustomLegend
items={legendData}
onClick={this.handleButtonClick}
legendVisible={this.state.legendVisible}
/>
Now in CustomLegend, we can include this in the button definition: onClick={this.props.onClick} Note that this pattern only works if the original function is bound to the parent since it alters the parent's state.
chart-container is now a CSS
Grid container.
It renders an inline style handling the column width based on state.
<div
className="chart-container"
style={{
gridTemplateColumns: this.state.legendVisible
? "80% 1fr"
: "1fr min-content"
}}
>
Note that 1fr is a fractional unit which, in this case, serves to fill the remaining space.
In styles.css, grid-auto-flow is set to column which allows things to be placed in the grid as columns. The things we place into the grid are SampleChart and CustomLegend, so SampleChart is the left column and CustomLegend is the right column.
gridTemplateColumns: 80% 1fr: When the legend is visible, we want the left column to take up 80% of the width and the right column to fill the rest.
gridTemplateColumns: 1fr min-content: When the legend is invisible, we want the right column to take up the minimum amount of space which its elements fill and the left column to fill the remaining space.
CustomLegend has only a single render method.
Instead of renderVisible and renderHidden, there is one method which conditionally renders the legend-list based on props (dependent on CustomChart's state).
The legend-container always renders now (it is a grid item).
Other small changes:
In SampleChart: <ResponsiveContainer width="100%" height="100%" className={props.className}> This has been changed because <SampleChart className="chart-area" data={data} /> actually sends className as a prop. Be careful with this! You need to set className directly on the parent tag in SampleChart's returned hierarchy (in this case the ResponsiveContainer). Try going back to your original codesandbox and changing the background-color on chart-area in styles.css (nothing happens!).
overflow: scroll in all instances from styles.css because we no longer need it.
You'll notice that if you attempt a grid layout using only fr units or any flex layout on chart-container, that the chart doesn't resize properly. Unfortunately, Recharts' ResponsiveContainers just don't play nicely with Grid or Flexbox (the project's main contributors are gradually tapering off support – no commits in 3 months as of now).
try this, it resolved the responsiveness (resizing) for both width and height
<div style={{position: 'relative', width: '100%', paddingBottom: '250px'}}>
<div
style={{
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
top: 0,
}}
>
<ResponsiveContainer>
<YourChartGoesHere />
</ResponsiveContainer>
</div>
</div>
The Best bet is to give it a width of 100% then play around with the aspect ratio till if satisfys you. I did this to adapt to different screen sizes
const theme = useTheme(); //this is from mui
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
<ResponsiveContainer width="100%" aspect={isMobile?1.5:1.8}>
Works like a charm
Add the following to your styles.css:
html, body, #root {
width: 100%;
height: 100%;
}
otherwise .chart-container, even though its width and height are set to 100%, will not take up the entire viewport. Then in SampleChart.jsx, change this:
<ResponsiveContainer width="100%" height={400}>
to this:
<ResponsiveContainer width="100%" height="100%">
to make your ResponsiveContainer's height... well, responsive.
I juse find an interesting question! My page can't running well on the 480 * 800 android device.
The style about the div, I used width: 15%; and the other one is width: 80%;!
I put my code here. the code about my page.
Why the width with % can't work well under the device which has a narrow width screen?
If I want' make it right, what I can do,I don't think give the width px is the best way, I even didn't give the font-size px?
The picture I get with the test tool Opera-mobile-emulator.