I am trying to test the border on an image using testcafe using getStyleProperty('border') and it always returns undefined. Other properties like box-shadow work fine.
HTML:
<img id="imgEdit" class="img-editable" [src]="imageUrl" style="border: 12px
solid rgb(0, 0, 0);" alt="editable image" />
const image = Selector('#imgEdit');
const imageBorder = await image.getStyleProperty('border');
imageBorder is always undefined.
border in CSS is considered a Shorthand property. This is the reason why you cannot find the border property.
If you console.log(image.style), you will see the actual border* CSS properties that represent the style="border: 12px
solid rgb(0, 0, 0);" in your HTML.
'border-bottom-color': 'rgb(0, 0, 0)',
'border-bottom-left-radius': '0px',
'border-bottom-right-radius': '0px',
'border-bottom-style': 'solid',
'border-bottom-width': '12px',
'border-collapse': 'separate',
'border-image-outset': '0px',
'border-image-repeat': 'stretch',
'border-image-slice': '100%',
'border-image-source': 'none',
'border-image-width': '1',
'border-left-color': 'rgb(0, 0, 0)',
'border-left-style': 'solid',
'border-left-width': '12px',
'border-right-color': 'rgb(0, 0, 0)',
'border-right-style': 'solid',
'border-right-width': '12px',
'border-top-color': 'rgb(0, 0, 0)',
'border-top-left-radius': '0px',
'border-top-right-radius': '0px',
'border-top-style': 'solid',
'border-top-width': '12px',
I am not sure which border property you want to test for, but here is a working example
image.getStyleProperty('border-bottom-color'); outputs rgb(0, 0, 0)
Related
I have an image with a slight black linear gradient over it to improve readablitiy
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("./images/slideshow/2.jpg");
However I am using a slideshow that only accepts divs with inline backgroundImage properties
<div
className="slideshow-image"
style={{ backgroundImage: `url(${slideshow2})`, repeat: "no-repeat" }}
>
The trouble is I cannot add the linear gradient that the image had before with inline styling.
//attempt 1
const backgroundStyle = {
backgroundImage: `url(${slideshow1})`,
linearGradient: "(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))",
};
// attempt 2
style={{
linearGradient: "(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))",
backgroundImage: `url(${slideshow1})`,
repeat: "no-repeat",
}}
//attempt 3
.slideshow-image {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
Neither of these display anything over the image. What can I try next to accomplish this?
I wanted to have a background overlay on my background image. I wanted to achieve something on this below:
Pls check my codesanbox also
Click here
image: {
backgroundImage:
"linear-gradient(0deg, rgba(255, 0, 150, 0.3), #06a303), url(http://lorempixel.com/800/600/nature/2)",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundPosition: "center"
},
Specify a sold gradient, black # about 50-60% opacity, with your background image under it. White text and some padding help the text pop.
backgroundImage:
"linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(http://lorempixel.com/800/600/nature/2)",
Code
const useStyles = makeStyles((theme) => ({
...
image: {
backgroundImage:
"linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(http://lorempixel.com/800/600/nature/2)",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundPosition: "center",
color: "white",
padding: "1rem"
},
...
}));
I'm trying to produce an icon button that looks like this:
So far what I've got is this:
Here's the code:
import { SvgIcon, IconButton } from '#material-ui/core';
import {ReactComponent as homemadePlayIcon} from "./play-icon.svg"
<IconButton onClick={this.playIconButtonClick} disableRipple={true} style={{color: "rgb(0,0,0,0)", width: '35px', height: '35px', backgroundColor: '#f5f5f5', boxShadow: "3px 3px 10px rgba(0, 0, 0, 0.2)"}}>
<SvgIcon component={homemadePlayIcon} />
</IconButton>
How do I center-align the icon inside the icon button?
Thank you,
James
I got the desired result by using #svgr with the --icon option (to preserve the viewbox property of the SVG) and by including the generated component inside the IconButton as follows:
import { IconButton } from '#material-ui/core';
import PlayIcon from "./icons/PlayIcon.js"
<IconButton onClick={this.playIconButtonClick} disableRipple={true} style={{color: "rgb(0,0,0,0)", width: '35px', height: '35px', backgroundColor: '#f5f5f5', boxShadow: "3px 3px 10px rgba(0, 0, 0, 0.2)"}}>
<PlayIcon />
</IconButton>
Edit that with this:
<IconButton onClick={this.playIconButtonClick} disableRipple={true} style={{color: "rgb(0,0,0,0)", width: '35px', height: '35px', backgroundColor: '#f5f5f5', boxShadow: "3px 3px 10px rgba(0, 0, 0, 0.2)", display: "flex", justifyContent: "center", alignItems: "center"}}>
My hamburgers are not aligning on the screen
I have visited different style methods like alignItems but still no results. concerning margins positioning I cannot go further left separating each line (all 3 of them) by about 2 px each.
the main problem is the horizontal alignment of each line.
Can someone help, please?
import React from 'react';
import {AppRegistry, StyleSheet, View} from "react-native" ;
export default class MenuButton extends React.Component {
render() {
return(
<View style={menuIcon.mainLine}>
<View style={menuIcon.line2}>
<View style={menuIcon.line3}>
</View>
</View>
</View>
)
}
}
const menuIcon = StyleSheet.create({
mainLine: {
flex: 1,
backgroundColor : 'rgba(255, 255, 255, 1)',
top : 4,
height : 6.5,
width : 35,
position : 'absolute',
marginTop : 40,
marginLeft : 25,
alignItems : "stretch",
left : 0,
right : 0,
borderRadius : 20,
borderStyle : 'solid',
borderWidth : 1,
borderColor : 'rgba(205, 205, 205, 1)'
},
line2: {
flex: 1,
backgroundColor : 'rgba(255, 255, 255, 1)',
top : 7,
height : 6.5,
width : 35,
position : 'absolute',
marginTop : 0,
marginLeft : 0,
left : 0,
right : 0,
borderRadius : 20,
borderStyle : 'solid',
borderWidth : 1,
borderColor : 'rgba(205, 205, 205, 1)'
},
line3: {
flex: 1,
backgroundColor : 'rgba(255, 255, 255, 1)',
top : 7,
height : 6.5,
width : 35,
position : 'absolute',
marginTop : 0,
marginLeft : 0,
left : 0,
right : 0,
borderRadius : 20,
borderStyle : 'solid',
borderWidth : 1,
borderColor : 'rgba(205, 205, 205, 1)'
}
})
AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);
i recommend using react-native-vector-icons for that.
but if you want to implement it yourself do this changes in your render function
render() {
return(
<View>
<View style={menuIcon.mainLine}></View>
<View style={menuIcon.line2}></View>
<View style={menuIcon.line3}></View>
</View>
)
}
usually we dont write hamburger code by our self .. or any other buttons icons.
We use icons or images inside view and apply onPress on view itself
with react-native we use react-native-vector-icons library. Installation basic usage guide here
https://www.npmjs.com/package/react-native-vector-icons
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)',