I'm trying to get the chart to extend to the bottom only. I tried using a column flex box with height="100vh". However, it's overflowing the screen.
<Flex direction="column" height="100vh">
<Flex flex="1" direction="row">
<div>123456789010 </div>
<Box flex="1">
<div>| 123</div>
<div>| 123</div>
<div>| 123</div>
<div>| 123</div>
<div>| 123</div>
<ThreeDataPoint />
</Box>
</Flex>
</Flex>
I notice that it'll work if I don't have any text above the chart. However, when I put anything above, it will cause it to overflow. It seems to be because the flexbox doesn't notice there's anything above, and is sizing the chart as if there's nothing there.
What could be occurring?
CODESANDBOX HERE
Try configuring the props of your react-financial-charts components.
The auto-sizing behavior of your react-financial-charts package seems to be causing this issue.
When inspecting the page in the browser, you’ll notice that your .react-financial-charts element has a hardcoded height equal to the height of the browser viewport. I had a look at this component with React Developer Tools in Chrome, and it seems to contain an AutoSizer component that may be causing this issue.
You export your BasicLineSeries component this way:
export default withSize({ style: { minHeight: 0 } })(
withDeviceRatio()(BasicLineSeries)
);
So my guess would be that withSize creates AutoSizer, which by default will resize the component to the size of the browser viewport.
The solution would then be to check the documentation for this package and figure out which props you need to use to tell it not to resize automatically.
One solution is to simply add overflow="hidden" prop to your Flex component like this : <Flex direction="column" height="100vh" overflow="hidden">
Related
I am using nativewind. The problem is text input and text isnt lined the diffrence is 1px you can see in the image i didnt added any paddings they are in the same view. How i can fix this problem?
Diffrence
<View className=" flex w-10/12 flex-row items-center focus:bg-fixinput dark:bg-fixinputDark">
<Text className="text-lg text-black pl-1">
{countryJson.find((country: any) => country.code === 'AT').dial_code}
</Text>
<TextInput
ref={phoneInputRef}
value={phone}
maxLength={10}
onChangeText={setPhone}
keyboardType="phone-pad"
placeholder="Your Phone Number"
autoComplete="tel"
autoCorrect={false}
autoCapitalize="none"
placeholderTextColor={'#999'}
className=" rounded text-red-500 text-lg h-20"
/>
</View>
I tried giving same height to the text and textinput but didnt solved the issue
I solved the issue the problem was coming from the parent view i sized as h-12 but it was too small for the font size. While textinput is empty textinputs height is smaller there is no problem it can center it but when i added a value the textinputs height changes so it moves. The fix is using better height parameter for the parent view. It was really easy to fix problem but i didn't manage to find i asked chatgpt first i got the same line height problem it made me to look another places and i lost a lot of time.
I am attempting to make some buttons on a react application by using touchable opacity. However I am finding an issue when I try and size the button, for instance: when I set the width of the button, the entire left and right to the end of the screen remains clickable even though the button is a much smaller region. Same happens if I try and add a margin, it'll set the vertical click zone above and below the button clickable for that corresponding margin amount.
<View style={styles.button}>
<View style={[{backgroundColor: props.color}, {height: 100},
{width: "70%"}, {margin: 10}]}>
<Text style={styles.text}>{props.text}</Text>
</View>
</View>
)
return<TouchableOpacity onPress={props.onPress}>{content}</TouchableOpacity>
By default every element has alignSelf set as 'stretch'. Add see if changing it to 'flex-start' helps.
<TouchableOpacity style={{alignSelf: 'flex-start'}}>
...
</TouchableOpacity>
If you are using react native version >= 0.63, then use Pressable component instead. It's more powerful, it provide hitSlop prop to adjust the pressable area of the button.
https://reactnative.dev/docs/pressable
When I am using the Material UI grid system with a project I am doing using create-react-app. I have two grid items that are adjacent to each other. That look like so:
This is exactly what I want. For some reason; however, when the page loads for a split second the text on the right side gets pushed upward and flashes unstyled like so:
I suspect it is because the image hasn't fully loaded, so the text sits higher up until the image loads. Any advice on how to prevent this or suggestions would be greatly appreciated!!
here is a code sandbox to recreate https://codesandbox.io/s/nifty-jang-kbbty?file=/src/pages/Home.js
if you go from the home page to /portfolio when the code sandbox is in full screen, you will see the flash of unstyled content i am talking about.
<Grid container justify='center' alignItems='center'>
<Grid item xs={12} sm={9} md={9} lg={6} xl={6}>
<img src={JobTracker} alt='jobtracker' style={{ width: '100%' }} />
</Grid>
<Grid item xs={12} sm={9} md={9} lg={6} xl={6}>
<Container maxWidth='xs'>
<Typography variant='h3' style={{ textAlign: 'center' }}>
JobTracker
</Typography>
<br />
<Typography variant='body2'>
A platform that allows recent graduates from Wyncode Academy to
track job applications. Technologies used: ReactJS, NodeJS, Google
Cloud Functions, and Google Firestore.
</Typography>
</Container>
</Grid>
</Grid>
In my experience, I usually wrap images in a wrapper has fixed ratio (usually golden ratio for me) to prevent this behavior. This is because, as long as image has not been loaded, the image container (in your case is Grid component) has zero height.
If you use fixed ratio wrapper approach, the image wrapper always have a height. That's it.
You can read more about that technique here: https://css-tricks.com/aspect-ratio-boxes/
I am using Material UI with React and wherever I put <Typography> element it gives itself too much height or it is not vertically aligning text inside of it properly. Here are some pictures as examples:
Here is a usage example from one of my screens:
<Typography onClick={() => _redirect("/")} variant="h6" className={classes.title}>
Boardee
</Typography>
classes.title only has a cursor: pointer inside of it.
It is a pretty weird "error". Not sure what to do with it.
I don't think that's the normal behavior or React Slick, but when initialize my page (via address bar), the carousel looks like that :
As you can see, there's a brown bar at right side of the screen.
But when I resize my browser window, it displays well.
Is there any way to prevent that when rendering the component?
I figured out what caused this behavior on my component, I was defining the height of the slide this way :
const heightCarousel = '80vh'
<Slider {...settings}>
<div style={{height:heightCarousel, background:'#F4CC67', padding:'15px 0', textAlign:'center'}}><h3>1</h3></div>
<div style={{height:heightCarousel, background:'#AA8326', padding:'15px 0', textAlign:'center'}}><h3>2</h3></div>
</Slider>
Instead of below, which lets React-slick defining the width automatically of each slide :
<Slider {...settings}>
<div style={{background:'#F4CC67', textAlign:'center'}}><div><h2>TEST</h2></div></div>
<div style={{background:'#AA8326', textAlign:'center'}}><h3>2</h3></div>
</Slider>
Note that you cannot define height inside a slide or you will get the same issue, but you still can play with padding to style your content inside.