I want to add a shadow to the border of my view . But, i dont want all the child in the view to be affected by the shadow too . I just want shadow outside the border of view , but not the text or image in the view . is it possible to do this ?
<View style ={{
margin:5,
borderWidth:0.5,
borderColor:'grey',
borderRadius:15,
overflow:'hidden',
elevation:10,
height:100}}
></View>
You can use this for shadow :
view: {
height : 100,
width : 100,
shadowColor: "#000000",
shadowOpacity: 0.8,
shadowRadius: 2,
shadowOffset: {
height: 1,
width: 0
}
}
I hope this is helpful.
I want to add a shadow to the border of my view
You can apply the property boxShadow to your <View> element.
e.g.
boxShadow: '6px 6px 4px rgb(127, 127, 127)',
Related
Current Behavior
Top side of tabBar has shadow.
Expected Behavior
how to remove top shadow of top tabBar?
tried elevation: 0 but it also removes bottom shadow.
Side note - How top shadow was achieved for Tabs.Navigator (react navigation)? as box-shadow properties does not work for android and elevation only shows shadow to bottom.
How to reproduce
<>
<Header /> //App name custom component
<Tabs.Navigator
...
tabBarOptions={{
....
style: {
// elevation: 0,
},
}}>
Try with this:
<>
<Header /> //App name custom component
<Tabs.Navigator
...
tabBarOptions={{
....
style: {
elevation: 0,
shadowColor: "#000000",
shadowOffset: { width: 0, height: 10 }, // change this for more shadow
shadowOpacity: 0.4,
shadowRadius: 6
},
}}>
shadowOffset: { width: 0, height: 10 } shadows place only in bottom of View.
shadowOffset: { width: 0, height: -10 } shadows place only in top of View.
shadowOffset: { width: 10, height: 0 } shadows place only in right of View.
shadowOffset: { width: -10, height: 10 } shadows place only in left of View.
Found this example here.
Basically, i had two buttons that had a top and bottom border, they are inside a view, like this
<View>
<MyTab>Sobre</MyTab>
<MyTab>Portfólio</MyTab>
</View>
This view is inside another one. This main container applies a padding arround the entire app. How can i make this border bottom and top to overlap this main padding and make the border to touch the end of the screen
My css applied to the buttons are
navigationTabs: {
fontFamily: Fonts.main.REGULAR,
width: '50%',
borderRadius: 0,
paddingTop: ScreenSize.getSpaces(10),
paddingBottom: ScreenSize.getSpaces(10),
marginBottom: ScreenSize.getSpaces(10),
textAlign: 'center',
borderColor: Colors.TEXT_DARK,
borderTopWidth: 0.5,
borderBottomWidth: 0.5,
},
I have a view with an icon (from react-native-vector-icons) inside as following:
return (
<View style={styles.iconContainerStyle}>
<Icon name='menu' size={23} style={styles.iconStyle} />
</View>
);
The following is the styling for both the components:
const styles = {
iconContainerStyle: {
justifyContent: 'center',
alignItems: 'center',
height: 30,
width: 35,
borderRadius: 5,
backgroundColor: '#ffffff',
padding: 2
},
iconStyle: {
color: '#2279b4',
}
};
The weird part is that the border radius prop of 5 should give evenly rounded borders, but this is what I get:
Notice that on the right hand side, the borders are sharper then the left part!
I even tried with different borderRaduis values, its still the same concept.
The header you see is provided by react-native-router-flex for my scenes, I think this is also a factor as their styles are also applied on the hamburger button.
A work around (temporarily) is by supplying another parent view with he following style:
<View style={{ justifyContent: 'center', alignItems: 'center', height: 35, width: 40, }}>
The height and width need to be a value bigger then that of the iconContainer.
Please add border: 1px solid #f00; to your code to see if toggle icon is not hidden behind something.
If it looks fine, try to add seperate radius to each angle, Like:
border-top-left-radius: 5px;
border-top-right-radius: 5px;
and so on. Also, try to use border-radius styles with !important.
I'm trying to apply some reasonably simple styles to my <Dialog> component. In this case, I am trying to round the corners with a border radius. Here are some simple inline styles that I'd like to use to override the default <Dialog> styles:
let overrideStyles = {
padding: 0,
margin: 0,
borderRadiusTopLeft: '4px',
borderRadiusTopRight: '4px',
};
<Dialog> provides a wide variety of possibilities for overriding internal styles. These include bodyStyle, contentStyle, style, titleStyle, overlayStyle, and actionsContainerStyle. I decided to try to apply these styles to each one.
<Dialog
bodyStyle={overrideStyles}
contentStyle={overrideStyles}
style={overrideStyles}
titleStyle={overrideStyles}
overlayStyle={overrideStyles}
actionsContainerStyle={overrideStyles}
modal={overrideStyles}
>
<TestPanel/>
</Dialog>
When I render my TestPanel, it ends up looking like this:
Notice the corners, where my border radius has not been applied... I opened up the inspector and noticed the following div:
If I apply the border radius styling to the highlighted div, the dialog will have its corners rounded as expected. Which leads me to my question...
How do I override the styles of Material UI's <Dialog> component to apply rounded corners as my CSS is attempting?
I solved it with paperProps property.
<Dialog PaperProps={{
style: { borderRadius: 2 } }}
> .... </Dialog>
This perfeclty worked for me
You can override styles like below.
const styles = {
root: { }
paper: { borderRadius: 15 }
}
// ...
<Dialog classes={{
root: classes.root,
paper: classes.paper
}}>
</Dialog>
Unfortunately, Material UI isn't supremely style-friendly. In this case, there's no prop you can override to change the border-radius, so we've got to apply our own class:
let headerStyles = {
color: 'white',
textAlign: 'center',
fontSize: 24,
backgroundColor: '#3B8DBC',
padding: 20,
borderTopLeftRadius: 4,
borderTopRightRadius: 4
};
let bodyStyles = {
backgroundColor: 'white',
padding: 10,
height: 200
};
<Dialog className='test'>
<div style={headerStyles}>Testing</div>
<div style={bodyStyles}>5:43pm</div>
</Dialog>
Then style that class, and, yes, the border-radius has to be set on both of the below CSS classes as well as the TestPanel header:
/* Some rules use !important because Material UI sets them by default */
.test > div > div {
background-color: #3B8DBC; /* Same background-color as TestPanel */
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.test > div > div > div {
/* Not overriding the color and border radius here too result in your changes
not being visible. */
background-color: inherit !important;
border-top-left-radius: 4px !important;
border-top-right-radius: 4px !important;
}
.test > div > div > div > div {
/* This div is the topmost padding between the modal content and the edge
of the modal */
padding: 0 !important;
}
This ends up looking like what you want:
screenshot here
Hope this helps!
You can override <Dialog /> styles globally in your application when creating your theme object. The paper key of MuiDialog will let you target the border-radius.
const theme = createMuiTheme({
overrides: {
MuiDialog: {
paper: {
borderTopLeftRadius: '4px',
borderTopRightRadius: '4px'
}
}
}
})
Dialog - CSS api
Material UI Theming
The first answer is not working for me. I tried this and it work perfect for me:
sx={{
"& .MuiDialog-container": {
"& .MuiPaper-root": {
width: "100%",
maxWidth: "740px",
borderRadius: "8px"
}
},
}}
My DOM is something like this:
wrapper
-element-container
--element (many)
---iconButton
Whenever an element is near the border of the element-container, the tooltip render is cut-off at the bounds of element-container.
How can I ensure tooltips always appear on top?
Here my current in-line styles:
element-container: {
paddingTop: '15px',
height: '65vh',
overflowY: 'scroll',
},
element: {
border: this.props.isSelected ? '4px solid #E71E61' : 'none',
boxSizing: 'content-box',
width: '300px',
transition: 'width 1.5s',
height: '500px',
margin: '15px',
position: 'relative',
},
iconButton: {
position: 'absolute',
marginTop: '-30px',
marginLeft: '-30px',
transform: this.state.isMouseOver === true ? 'scale(1,1)' : 'scale(0,0)',
transition: 'all .2s',
},
icon: {
height: '40px',
width: '40px'
},
I've tried:
setting the zIndex of both the tooltip (via the tooltipStyle prop of IconButton
changing the position of each element to different values (since this issue indicates position affects zIndex)
overwrting the entire tooltipStyle with the default style found in the MUI source code
ETA: Here's a screen shot of the issue I'm describing. My screenshot app doesn't capture the pointer, so I've drawn one to indicate that the mouse is over the grey circle button.
The cut-off tooltip is the dark box with the letters 'ing' visible. While this pic shows cut-off on the left side of the container, all sides behave the same.