Develop Reference

why is there a gap between view and text input?

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.

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.

change color of button text with makeStyles

Previously, I was styling my button like this:
style={{
background: '#6c74cc',
borderRadius: 3,
border: 0,
color: 'white',
height: 48,
padding: '0 30px',
}}>
This worked well. The text color was white while the background color was the color of the button. However, now I am using this:
className={classes.button}>
export const useStyles = makeStyles((theme: Theme) =>
createStyles({
button: {
background: '#6c74cc',
borderRadius: 3,
border: 0,
color: 'white',
height: 48,
padding: '0 30px',
//fontStyle: 'red',
},
}),
);
While the background color is correct, the text color is not white (when the button is disabled). When the button is not disabled then its fine. Otherwise, it's not. How can I fix this?

You have set color value as 'red', try changing it to white. It should work.

It'd be helpful to see a codesandbox example, but I suspect that the material button has a color attribute set for disabled elements and thats why the text color is wrong.
Material-ui uses makestyles which uses jss to create style sheets - so if you create a pseudo selector for its disabled state e.g.
export const useStyles = makeStyles((theme: Theme) =>
createStyles({
button: {
background: '#6c74cc',
borderRadius: 3,
border: 0,
height: 48,
padding: '0 30px',
'&:disabled': {
color: 'white',
}
},
}),
);
You should find that the correct color is applied.
If not reply with a minimal code sandbox and I'll be happy to take a look :)

wrapping text disappearing after giving overflow hidden

to fix the wrapping issue of this text ---> testing the be Bhere I am here I am here I am here I am here I
am testing the be Bhere I am here I am here I am here I am here
I am 12 34 56 78 90 123 456 7778 88889 9999 999690909090
I used overflow: "hidden" in the class right_box.
wrapping text got fixed.
but when i decrease the screen size I am seeing some of the texts are getting hidden.
I googled and found line height will fix it,
so I gave it in the two classes sportsCardHeaderItemHeadingValue and right_box
but still its not fixing.
can you tell me how to fix it.
providing code snippet and sandbox below.
https://codesandbox.io/s/material-demo-e89n0
sportsCardHeaderItemHeadingValue: {
fontWeight: "bold",
fontSize: 20,
color: "#263238",
wordWrap: "break-word",
lineHeight: 1.2
},
right_box: {
border: "1px solid #000",
// padding: 5,
// background: '#ff0',
marginTop: 8,
marginRight: 8,
float: "left",
// width: 150,
height: 55,
overflow: "hidden",
lineHeight: 1.2
},
<div className={classes.right_box}>
0<div className={classes.sportsCardHeaderItemHeading}>Sports</div>
<div className={classes.sportsCardHeaderItemHeadingValue}>
testing the be Bhere I am here I am here I am here I am here I
am testing the be Bhere I am here I am here I am here I am here
I am 12 34 56 78 90 123 456 7778 88889 9999 999690909090
</div>
</div>

There is a height set on right_box so it can't grow height-wise to fit content. Also, when resizing the view to then restrict the width, it then overflows the content. When you add the CSS rule overflow:hidden; to right_box it then hides the overflow and you can't see it.
I commented out the height and overflow rules (approx lines 424-425) and now you can see the element expands to fill width and the height grows to fit content.
right_box: {
border: '1px solid #000',
// padding: 5,
// background: '#ff0',
marginTop: 8,
marginRight: 8,
float: 'left',
// width: 150,
// height: 55, // don't restrict height
// overflow: "hidden", // element can grow now so don't need to hide overflow
lineHeight: 1.2,
},
codesandbox

How to use borderRadius and borderLeftColor, borderBottomColor, borderRightColor, borderTopColor in CSS?

I want the circle with 25% coloured border and 75% transparent but got as unexpected 100% circle border with black colour.
I also tried borderRadius for each corner but it's not giving desirable output.
progressLayer: {
width: 200,
height: 200,
borderWidth: 20,
position: 'absolute',
borderLeftColor: 'transparent',
borderBottomColor: 'transparent',
borderRightColor: 'transparent',
borderTopColor: '#3498db',
borderRadius: 100,
}
});
circle with 25% colored border and 75% transparent.

To make some borders transparent, this should work:
border-right: 2px solid transparent;
And same for other borders.

A neat trick for using transparent instead of opacity is to use rgba colors, so , it would´t be borderLeftColor: 'transparent' , instead use borderLeftColor: 'rgba(0,0,0,0)'
[the last 0 is the transparency, if you use 0,0,0,1 it will be black and 0,0,0,0.5 gives a nice black overlay].
Another solution
Is just enable borderwidth for an specific direction.
progressLayer: { width: 200, height: 200, borderTopWidth: 20, position: 'absolute', borderTopColor: '#3498db', borderRadius: 100, } });
should work but not tested for a circle