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.
Related
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">
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'm working on a quiz app. In which users select an option based on his confidence so for that I decided to make three boxes in each option using touchable opacity and its working fine but I want to have text behind these boxes that I failed to achieve yet. Here is my code
Note: This "Style" contains style objects for the app.
<View style={[ Style.flexRow, Style.marginV5, Style.borderRadius20, Style.paddingDefault, Style.bgLight ]}>
<Text>Ajax</Text>
<TouchableOpacity style={[ Style.flex, Style.borderRight, Style.height100, Style.borderLeft ]}>
</TouchableOpacity>
<TouchableOpacity style={[ Style.flex, Style.borderRight, Style.height100, Style.borderLeft ]}>
</TouchableOpacity>
<TouchableOpacity style={[ Style.flex, Style.borderRight, Style.height100, Style.borderLeft ]}>
</TouchableOpacity>
</View>
One way is to do that is to make text position absolute but after that, it is impossible to change the height of the parent dynamically according to text size. Please help me to solve this issue or suggest me if you know any better solution than this. Thanks!
Instead of setting the text as absolute, you could put the TouchableOpacity boxes inside a flex container and set the container to absolute instead. This would allow the text size to control the height of the box, while allowing you to add as many boxes as you like in front of the text.
See my example here:
https://codepen.io/sungaila/pen/oQpPQq
You can give negative margin values to other elements.
Since you have Text component hierarchically in the first order, you should set TouchableOpacity's margin to a negative value.
<Text>Ajax</Text>
<TouchableOpacity style={{marginTop: -100}}
This way, TouchableOpacity will move 100 unit upwards, and overlay the Text element.