I want my video to cover the entire screen but it seems to cover only half of the screen as follows
I have styled the video component as follows:
<Video
source={{uri: this.state.video}}
style={{
position: 'absolute',
top: 0,
left: 0,
alignItems: 'stretch',
bottom: 0,
right: 0,
height: Dimensions.get('window').width,
}}
resizeMode="cover"
repeat={true}
/>
Could anyone tell me how to achieve this behavior and where am I going wrong?
Any help would be useful.
Somehow giving a height has solved the mentioned issue like follows:
<Video
source={{uri: this.state.video}}
style={{
position: 'absolute',
top: 0,
left: 0,
alignItems: 'stretch',
bottom: 0,
right: 0,
height: "90%",
}}
resizeMode="cover"
repeat={true}
/>
Related
In this code the mirrored property is not working. What is the problem in this code?
<Webcam
mirrored={true}
ref={webcamRef}
style={{
position: "absolute",
marginLeft: "auto",
marginRight: "auto",
left: 0,
right: 0,
textAlign: "center",
zindex: 9,
width: 640,
height: 480,
}}
/>
I have a view that I would like to set the background opacity to 0.5 however I need the text component inside of the view to show completely (as if its opacity was 1)
<View
style={{
position: 'absolute',
bottom: 0,
left: 0,
backgroundColor: 'white',
opacity: 0.5,
borderRadius: 5,
}}>
<Paragraph>folder</Paragraph>
</View>
I've found that the most straighforward way of reaching this desired outcome is to specify that you want the backgroundColor to have this specific opacity, and not the entire View element. Check the 'Opacity' section of this page for more info: https://www.w3schools.com/css/css3_colors.asp#:~:text=RGBA%20color%20values%20are%20an,and%201.0%20(fully%20opaque)
For example, if you want to have a green background, with an opacity of 0.5, you would want to set
backgroundColor: rgba(0, 255, 0, 0.5)
If you want the text folder to be less opaque, then you will have to apply styling directly to it, while keeping its parent's opacity as desired -
<View
style={{
position: 'absolute',
bottom: 0,
left: 0,
backgroundColor: 'white',
opacity: 0.5,
borderRadius: 5,
}}>
<Paragraph>
<span style={{ opacity: 1 }}>
folder
</span>
</Paragraph>
</View>
You can also try setting the backgroundColor with an opacity attached directly to it -
backgroundColor: rgb(0, 0, 0, 0.5)
I would like to create a responsive background video in my react application using material-ui but it seems my understanding of material-ui breakpoints needs some help. My first attempt was doing something like:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
display: 'inline-block',
position: 'fixed',
top: '0',
right: '0',
bottom: '0',
left: '0',
overflow: 'hidden',
zIndex: -100,
padding: theme.spacing(1),
[theme.breakpoints.down('lg')]: {
background: 'url("./assets/img/MichaelPR.jpg") center center / cover no-repeat'
},
},
video: {
position: 'absolute',
top: '50%',
left: '50%',
width: 'auto',
height: 'auto',
minHeight: '100%',
WebkitTransform: 'translate(-50%, -50%)',
MozTransform: 'translate(-50%, -50%)',
MsTransform: 'translate(-50%, -50%)',
transform: 'translate(-50%, -50%)',
display: 'inline-block',
[theme.breakpoints.down('lg')]: {
display: 'none',
},
}
})
);
export default () => {
const styles = useStyles();
return (
<div className={styles.root}>
<video
autoPlay
muted
loop
className={styles.video}
>
<source src='./assets/vid/MichaelPR.mp4' type='video/mp4' />
Your device does not support playing 'video/mp4' videos
</video>
</div>
)
}
The idea here is to make the video stop displaying and cause the background of the parent div to be a static image for all devices which have a screen size of less than 'lg'. But this is now what happens. What I see is the video is NEVER displayed no matter what the screen size. If I change the breakpoint from 'down' to 'up'. I seems to work as expected but not what is desired. I get a static image for the background and the video display is stopped. So my question is how do I get the desired effect for screen sizes BELOW 'lg'?
To make it static on all devices less than lg you would want to use theme.breakpoints.down('md') as down is inclusive of the breakpoint you enter.
I've now been working in circles trying to understand what is happening. I'm making a design library using storybook with Tailwind. I can't seem to get the :before pseudo class to work. No matter where I place it in the styling, then it's never rendered.
An example is that I am trying to make a component which uses react-slick, and want to style the navigation:
'& .slick-dots': {
bottom: -30,
display: 'block',
left: 4,
listStyle: 'none',
margin: 0,
padding: 0,
position: 'absolute',
textAlign: 'center',
width: '100%',
'& li': {
cursor: 'pointer',
display: 'inline-block',
height: 20,
margin: '0 5px',
padding: 0,
position: 'relative',
width: 20,
'& button': {
border: 0,
background: 'transparent',
display: 'block',
height: 20,
width: 20,
outline: 'none',
lineHeight: 0,
fontSize: 0,
color: 'transparent',
padding: 5,
cursor: 'pointer',
'&:before': {
position: 'absolute',
top: 0,
left: 0,
content: '',
width: 20,
height: 20,
fontFamily: 'sans-serif',
fontSize: 20,
lineHeight: 20,
textAlign: 'center',
color: '#000000',
opacity: 0.75,
display: 'inline-block',
},
},
},
},
Found the problem. The :before pseudo class won't render unless there is content, but in the case of css in js, then content needs to look like this content: '"text"', and not content: 'text',
Another way is to define your content in the tailwind.config.js
theme: {
extend: {
content: {
'arrowNeonGreen': 'url("../src/images/icons/arrow-neon-green.svg")',
},
fontSize: {
...
You can render it using the following className. Make sure to include an inline-block and width.
<Link className="after:content-arrowNeonGreen after:inline-block after:w-8">Learn More</Link>
You can also apply a hover state like this hover:after:content-arrowNeonGreen
<Link className="hover:after:content-arrowNeonGreen after:content-arrowBlack after:inline-block after:w-8">Learn More</Link>
to get the :before class to work, you have to use tailwindcss-pseudo-elements package to customize your pseudo elements. check the docs below
https://www.npmjs.com/package/tailwindcss-pseudo-elements
I want to use rc-slider for my project.
I want to display different pricing.
It should be like this:
but when i'm trying to implement the slider for my site, it looks like this:
And here's my code for the slider.
<div className="rc-slider rc-slider-with-marks">
<div className="rc-slider-rail" style={{backgroundColor: 'rgb(216, 216, 216)', height: 6}} />
<div className="rc-slider-track" style={{backgroundImage: 'linear-gradient(91deg, rgb(13, 119, 243), rgb(14, 126, 243))', height: 6, left: '0%', width: '0%'}} />
<div className="rc-slider-step"><span className="rc-slider-dot rc-slider-dot-active" style={{left: '0%', width: 10, height: 10, border: 'none', backgroundColor: 'rgb(27, 124, 239)', bottom: '-4px'}} /><span className="rc-slider-dot" style={{left: '14.2857%', width: 10, height: 10, border: 'none', backgroundColor: 'rgb(216, 216, 216)', bottom: '-4px'}} /><span className="rc-slider-dot" style={{left: '28.5714%', width: 10, height: 10, border: 'none', backgroundColor: 'rgb(216, 216, 216)', bottom: '-4px'}} /><span className="rc-slider-dot" style={{left: '42.8571%', width: 10, height: 10, border: 'none', backgroundColor: 'rgb(216, 216, 216)', bottom: '-4px'}} /><span className="rc-slider-dot" style={{left: '57.1429%', width: 10, height: 10, border: 'none', backgroundColor: 'rgb(216, 216, 216)', bottom: '-4px'}} /><span className="rc-slider-dot" style={{left: '71.4286%', width: 10, height: 10, border: 'none', backgroundColor: 'rgb(216, 216, 216)', bottom: '-4px'}} /><span className="rc-slider-dot" style={{left: '85.7143%', width: 10, height: 10, border: 'none', backgroundColor: 'rgb(216, 216, 216)', bottom: '-4px'}} /><span className="rc-slider-dot" style={{left: '100%', width: 10, height: 10, border: 'none', backgroundColor: 'rgb(216, 216, 216)', bottom: '-4px'}} /></div>
<div role="slider" tabIndex={0} aria-valuemin={10} aria-valuemax={80} aria-valuenow={10} aria-disabled="false" className="rc-slider-handle" style={{borderColor: 'rgb(27, 124, 239)', borderWidth: 7, marginTop: '-6px', height: 18, width: 18, backgroundColor: 'rgb(255, 255, 255)', left: '0%'}} />
<div className="rc-slider-mark"><span className="rc-slider-mark-text rc-slider-mark-text-active" style={{width: '12.8571%', marginLeft: '-6.42857%', left: '0%'}}>25K</span><span className="rc-slider-mark-text" style={{width: '12.8571%', marginLeft: '-6.42857%', left: '14.2857%'}}>50K</span><span className="rc-slider-mark-text" style={{width: '12.8571%', marginLeft: '-6.42857%', left: '28.5714%'}}>100K</span><span className="rc-slider-mark-text" style={{width: '12.8571%', marginLeft: '-6.42857%', left: '42.8571%'}}>250K</span><span className="rc-slider-mark-text" style={{width: '12.8571%', marginLeft: '-6.42857%', left: '57.1429%'}}>500K</span><span className="rc-slider-mark-text" style={{width: '12.8571%', marginLeft: '-6.42857%', left: '71.4286%'}}>1M</span><span className="rc-slider-mark-text" style={{width: '12.8571%', marginLeft: '-6.42857%', left: '85.7143%'}}>3M</span><span className="rc-slider-mark-text" style={{width: '12.8571%', marginLeft: '-6.42857%', left: '100%'}}>5M</span></div>
</div>
And here's my css for the slider.
.view-container .upper-info .pricing-content-wrap .rc-slider {
margin-bottom: 45px;
}
.view-container
.upper-info
.pricing-content-wrap
.rc-slider
.rc-slider-mark-text {
bottom: -47px;
color: #a4a4a4;
}
It seems like you forgot to import rc-slider CSS.
import 'rc-slider/assets/index.css'
I tried to reproduce your issue here and removing this CSS import leads to your broken behavior.
Otherwise, it's OK.
Also, note that using inline styles stye={{ prop: value, etc... }}is not a good practice, consider moving them to CSS and operate with class names only in JSX.
Another thing to improve is boilerplate markup. You can use maps to reduce the amount of code:
const marks = ['50K', '100K', '250K']
// in render
<div className="slider-rail">
{marks.map(m => <SliderDot key={m} />)}
</div>
<div className="slider-handle">
{marks.map(m => <SliderMark key={m} label={m} />)}
</div>
// SliderDot
const SliderDot = () =>
<span
className="rc-slider-dot"
style={{
left: '85.7143%',
width: 10,
height: 10,
border: 'none',
backgroundColor: 'rgb(216, 216, 216)',
bottom: '-4px',
}}
/>
// SliderMark
const SliderMark = ({ label }) =>
<span
className="rc-slider-mark-text"
style={{width: '12.8571%', marginLeft: '-6.42857%', left: '100%'}}
>
{label}
</span>
I was facing a similar issue on my Rails app: the whole slider didn't show up even with the import 'rc-slider/assets/index.css' line within the component.
I've just removed it and called it in my main scss file. Now, it works like a charm, hope it helps some people!