I have the following code with me. Please help me how to add opacity or how to dim the background while modal is open.
Here is the working example
Add this backgroundColor property to your Modal component in line 57:
style={{
display: this.state.display,
backgroundColor: this.state.modalShow ? "red" : "none"
}}
What this does is that when the modalShow state is truthy (aka when it's shown) the backgroundColor returns red and none the other way. To dim it you can use rgba(0,0,0,.2) instead of red obviously
EDIT: sandbox
Related
im trying to style Material UI DataGrid rows to have borders, something close to this screenshot (I censored some information, but u get the idea)
The problem I have is that I can't get the right border to appear ( codesandbox below )
So far I tryied to style the global class .MuiDataGrid-row with border: 1, all borders except the right are being applied, I don't understand why.
Also with this approach, the first row have double bottom border because the second row top border is overlapping and it looks weird, if u can give me a hand with that too would be great!
There are two methods
METHOD 1: (simple)
Add showCellRightBorder={true} to your Datagridcomponent
METHOD 2: (provides customization)
Add the following css to your sx prop of Datagrid Component..
CODE TO BE REMOVED:
// "& .MuiDataGrid-row": {
// borderTop: 1,
// borderBottom: 0
// },
CODE TO BE ADDED:
"& .MuiDataGrid-cell": {
border: 1,
borderRight: 0,
borderTop: 0,
// add more css for customization
},
I use button in react-native-paper with icon. I need to add a shadow style only to the icon of the button. The only available option I found was to add an elevation to the button. But it is applied to the whole button instead of applying only to the icon of the button.
The code of button:
<Button
icon={icon}
onPress={onPress}
size={size}
color={color}
animated={animated}
disabled={disabled}
style={styles.btnStyles}
/>
The Style of button to add shadow:
btnStyles: {
elevation: 40,
shadowColor: '#000',
backgroundColor: 'rgba(0,0,0,0)',
},
The result:
enter image description here
(Here you can see that the shadow is applied to the button, not to the icon inside.)
How can I solve above issue and add a shadow only to the icon?
Thanks in advance.
I have an icon tag in html as:
<clr-icon
[attr.shape]="open ? (iconOpen ? iconOpen : 'caret up') : (iconClose ? iconClose : 'caret down')"
></clr-icon>
I tried applying a transition in CSS like this:
clr-icon {
transition: all 2s ease-in-out;
}
But it doesn't animate.
By writing:
<clr-icon [attr.shape]="open ? 'caret up' : 'caret down'"></clr-icon>
you're not binding to the direction, you're binding to the shape itself. This means whenever Angular updates that binding, it'll force the icon to re-render a brand new shape.
What you want is simply to bind the direction, and keep the shape constant:
<clr-icon shape="caret" [attr.dir]="open ? 'up' : 'down'"></clr-icon>
You can see it working fine here: https://stackblitz.com/edit/clarity-animate-icon?file=src/app/app.component.html
Go to https://snack.expo.io/HJV601djf and open login_screen/components/Form.js. As you can see, the textInput has the style
textInput: {
flex:1,
height: 50,
marginBottom: 20
}
You can see that the user icons are not aligned with the text input. If I take marginBottom out, everything goes ok, but with marginBottom: 20 the icons get dealigned. I can probably fix that by making the text input get aligned vertically too, but I'll not know the cause of the problem.
How can marginBottom affect the insides of UserInput if it's supposed to add space only on the outside?
Printscreen if you don't want to wait to load the app:
This is happening because , in your UserInput.js, you are trying to merge the styles for the textInput while the Image / Icon styles are remaining the same, therefore it is misaligned.
The optimum way to solve this would be to add a textInputContainer style to the component and set the margin to it as
TextInput.js
<View style={mergeObjects(this.props.containerStyle ? StyleSheet.flatten(this.props.containerStyle) : {}, StyleSheet.flatten(styles.inputWrapper))}>
Form.js
<UserInput
containerStyle={styles.textInputContainer}
style={styles.textInput}
source={{uri:'http://www.free-icons-download.net/images/user-icon-74490.png'}}
placeholder="e-mail"
autoCapitalize={'none'}
returnKeyType={'done'}
autoCorrect={false}
/>
and the styles
textInputContainer : {
marginBottom: 20
},
Here's the snack for the same
I am trying to add custom buttons to the left and right navButton but a spacer seems to appear if I set a backgroundImage. If only the title text is set the spacing is correct. Here is my example to reproduce the issue, I added a borderColor to show that the image is not the culprit.
var win = Ti.UI.createWindow({
width: '100%',
height: '100%',
backgroundColor: 'white'
});
var leftBtn = Ti.UI.createButton({
backgroundImage:"/images/headerCmdMenu.png",
width: '81px',
height:'74px',
title: 'left',
borderColor: 'red',
borderWidth: 1
});
var rightBtn = Ti.UI.createButton({
width: '81px',
height:'74px',
title: 'right'
});
win.leftNavButton = leftBtn;
win.rightNavButton = rightBtn;
var nc = Ti.UI.iOS.createNavigationWindow({
window : win
});
nc.open();
Here is a screenshot of the view…
http://imagebin.ca/v/13wq8Jrn1hst
Any ideas how to fix this?
Thanks.
Chris
Note: I did ask this on the official forums, but got no answer after 14 days.
http://developer.appcelerator.com/question/160022/leftnavbutton-and-rightnavbutton-spacer-appears-if-using-backgroundimage-#comment-196608
This is quite long to answer but it might still help someone else looking for same issue.
For images in left/right nav buttons, look for the below points first:
If you only set title, then it will work as expected.
If you set only backgroundImage (not set width & height), then the image will be stretched to take the full space.
If you set only backgroundImage with some width & height, then the button will behave as a normal button with expected spacing and area.
If you set both backgroundImage & title, then it will be the case of this post.
Also remember that always use correct size image files when intend to use as left/right nav buttons.