why is there a gap between view and text input? - javascript

I'm getting some gap between my wrapper view and text input, I checked padding and margin but nothing works:
<View style={styles.wrapper}>
<View style={{ width: '100%',height:'10%', backgroundColor: 'yellow' }}></View>
<TextInput style={styles.edit_input}
numberOfLines={15}
multiline={true}
/>
</View>
styling:
wrapper: {
width: '90%',
marginTop: '10%',
backgroundColor: 'gray',
borderTopWidth: 1,
},
edit_input: {
backgroundColor:'white',
color: 'black',
borderWidth: 1,
textAlignVertical: 'top',
width: '90%',
alignSelf: 'center',
},
but this goes away when you replace height:'10%' with height:50
any idea what's causing this? or how to solve this issue using relative units?

I do not recommend using your approach as it tends to behave differently on different devices. For example, your approach looks just as you expect it on web, but shows the gap on mobile devices.
Instead use a flexbox approach. The question is what you actually want to achieve here. You don't set a height on the wrapper or the Textinput. The height of the yellow bar is 10% of what exactly then? That's kind of ambiguous and prone for unexpected design issues. You could do something like this with flex box, if you want your yellow box to be 10% of the TextInput.
export default function App() {
return (
<View style={styles.wrapper}>
<View style={{ width: '100%', flex:1, backgroundColor: 'yellow' }}></View>
<TextInput style={styles.edit_input}
numberOfLines={15}
multiline={true}
/>
</View>
);
}
const styles = StyleSheet.create({
wrapper: {
width: '90%',
marginTop: '10%',
backgroundColor: 'gray',
borderTopWidth: 1,
flex: 1
},
edit_input: {
backgroundColor:'white',
color: 'black',
borderWidth: 1,
textAlignVertical: 'top',
width: '90%',
alignSelf: 'center',
flex: 9
},
});
Note that this approach will fill all the available space while yours didn't. But your only element with a height was TextInput with numberOfLines, which has a different size depending on the users fontscaling etc. So you should not rely on that.

Related

Material UI React — Select text wrap for long strings in menu (mobile/desktop)?

I have a few long strings in an MUI Select component. Is there any way to add a text-wrap or something similar to make sure the width doesn't exceed and doesn't cut off in mobile.
Desktop:
Mobile:
<FormControl sx={{ m: 1, minWidth: '100%', marginLeft: 0, padding: 0 }}>
<Select
value={prompt}
onChange={handleChange}
displayEmpty
inputProps={{ 'aria-label': 'Without label' }}
sx={{'bgcolor': 'rgba(139, 139, 139, 0.3)', color: 'white', border: '1px solid rgba(255, 255, 255, 0.4)', minWidth: '100%', marginLeft: 0, padding: 0}}
>
{prompts.map((prompt, i) => <MenuItem value={i}>{prompt}</MenuItem>)}
</Select>
prompt is a string[].
How can I style the select menu? Is there any way to make sure the dropdown width doesn't exceed the Select width?
It should be possible to get multi-line / wrapping menu items when setting white-space to normal
in CSS:
white-space: normal;
or as inline style in the Mui component (or via some sx prop I guess)
<MenuItem style={{whiteSpace: 'normal'}} value={i}>{prompt}</MenuItem>

React Native shadow

Im doing react-native and i have this problem,
I declare the shadow color and also elevation, but the top shadow is thinner than the bottom, i have tried shadowOffset with width: 0 and height: 0 but no use, anyone can help me ?
image
here's my style code
circle: {
marginTop: 48,
alignSelf: 'center',
width: 248,
height: 248,
borderRadius: 248,
backgroundColor: '#141414',
shadowColor: '#D8D8DF',
elevation: 24
}
I don't know if this will help you out but in the past I have used....
React Native Shadow Generator

CenterText in doughnut in react

centerText: {
display: true,
text: `${income}`,
fontSize : 10
}
I'm not able to see center text using about code in option of doughnut chart.
Anyone know why?
Thank you in advance
It was sometime ago when I was researching about adding centering text in react-chartjs-2's Doughnut, and I briefly remembered the easiest way to achieve center text in Doughnut is actually using relative and absolute positioning to add a layer to the doughnut.
<div style={{ width: '200px', height: '200px', position: 'relative'}}>
<Doughnut data={data} options={options} width={200} height={200}/>
<div style={{ position: 'absolute', width: '100%', top: '50%', left: 0, textAlign: 'center', marginTop: '-28px', lineHeight: '20px'}}>
<span>Text here</span> //may use text-align here to center text
</div>
</div>

Cannot Get Element Behind Another With Z-Index and Declaring Position

I have a div I'm using as header/nav menu. This div has a drop shadow. There is a dropdown menu when you hover over menu item "Configuration". I want this dropdown menu to appear behind the drop shadow. I am using declared positions and z-index for all elements. The dropdown is z-index 99 and header div is index 100. The dropdown will not appear behind the header div.
I am using Gatsby, React, and Radium. The syntax for the styling below is because I'm using a "styles" object in Javascript to apply the styles.
headerDiv: {
background: 'white',
marginBottom: '1.45rem',
paddingLeft: '10px',
paddingRight: '10px',
boxShadow: '0px 6px 6px rgba(0,0,0,0.2)',
zIndex: '100',
position: 'relative'
},
dropdownMenu: {
opacity: '1',
position: 'absolute',
top: '95%',
left: '0',
zIndex: '99',
padding: '20px 100px 0px 20px',
whiteSpace: 'nowrap',
float: 'left',
minWidth: '160px',
margin: '2px 0 0',
fontSize: '12px',
textAlign: 'left',
listStyle: 'none',
backgroundColor: 'white',
backgroundClip: 'padding-box',
boxShadow: '0 6px 12px rgba(0,0,0,0.175)'
}
I solved this with a workaround. I turned off z-index on all elements. Then I created an empty div and gave it the drop shadow. I gave this div a z-index of 99 and the header navigation menu a z-index of 99 (so it appears behind the empty div). Now it works as intended.

React Native Modal styling

So, I have a modal in react native which takes my whole screen, I do not want this to happen, any ideea how to configure it?
I have the following structure
<Modal visible={props.display} animationType="slide" style={{
width: '50%',
height: '50%'}}>
<Wrapper>
<ShiftDeclinedWrapper>
<CenterText padding="20px">{props.data}</CenterText>
<Footer>
<ButtonWrapper>
<Button
isDisabled={props.isLoading}
onPress={() => props.declineAccept()}
textColor="white"
color={theme.color.red}>
Decline
</Button>
</ButtonWrapper>
<ButtonWrapper>
<Button
isDisabled={props.isLoading}
onPress={props.declineBack}
textColor="white"
color={theme.color.green}>
No, thanks
</Button>
</ButtonWrapper>
</Footer>
</ShiftDeclinedWrapper>
</Wrapper>
</Modal>
The Wrapper component structure is
export const Wrapper = styled.View`
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
flex: 1;
`;
ShiftDeclineWrapper is just
export const ShiftDeclinedWrapper = styled.View`
text-align: center;
`;
I have tried putting 50% width/height just so i can make sure it works so i can style it how i want, I tried putting it on the modal, wrapper, also shiftdeclinewrapper too nothing worked
From the Modal documentation here, you can't use the style prop for this.
You can add the styles to your <Wrapper> element and add the prop transparent to your Modal to get a transparent background (instead of the default white).
<Modal visible={props.display} animationType="slide" transparent>
<Wrapper style={{width: '50%', height: '50%'}}>
You also have to use the style props over on your <Wrapper> component.
This worked for me!
<Modal
presentationStyle="overFullScreen"
transparent
visible={true}
>
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
}}>
<View style={{
backgroundColor: "#fff",
width: 300,
height: 300,
}}>
<Text>MY TEXT </Text>
</View>
</View>
</Modal>

Categories

Resources