Related
I am trying to make React modal have a smooth transition when it appears on the screen but can't seem to get the transition property to do anything. Right now, the modal pops onto the screen in a jarring manner but I'd like to get it to slowly fade in. Here is my modal with the styles:
const customStyles = {
content: {
top: "50%",
left: "50%",
right: "auto",
bottom: "auto",
marginRight: "-50%",
transform: "translate(-50%, -50%)",
transition: "opacity .5s",
width: "90%",
maxHeight: "600px",
overflow: "auto",
padding: "40px",
maxWidth: "500px",
borderRadius: "10px",
boxShadow: "0px 0px 15px 1px gray",
},
};
<Modal
ariaHideApp={false}
isOpen={modalIsOpen}
onRequestClose={() => setIsOpen(false)}
style={customStyles}
contentLabel="Example Modal"
>
Anyone have any suggestions?
I think you need to put opacity as a property itself.
const customStyles = {
content: {
top: "50%",
left: "50%",
right: "auto",
bottom: "auto",
marginRight: "-50%",
transform: "translate(-50%, -50%)",
opacity: "20%",
transition: ".5s",
width: "90%",
maxHeight: "600px",
overflow: "auto",
padding: "40px",
maxWidth: "500px",
borderRadius: "10px",
boxShadow: "0px 0px 15px 1px gray",
},
};
I'm using NextJs and one of my view has absolute positioning.
That view's position is changing after initial render according to this block:
.medal {
height: 15vw;
position: absolute;
top: 20px;
left: -20px;
}
Why my view's position is changing 20 px to top, -20px to left after the initial render?
What I expect is that my view should be rendered initially 20px to top, -20px to left.
Edit:
<main style={{ padding: 20, }}> //If I remove the padding, issue disappears
<Grow
in={secondScreenActive}
style={{ transformOrigin: '0 0 0' }}
{...(secondScreenActive ? { timeout: 1000 } : {})}
>
<div className={styles.cardPerson}>
<div style={{ flex: 1, display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'space-between', flexDirection: 'row' }}>
<div style={{width:'1vw'}}>
<Medal style={{height:'15vw',position: 'absolute', top: 20, left: -30}}/>
</div>
</div>
</div>
</Grow>
</main>
CSS
.cardPerson {
height: 30vh;
display: flex;
padding: 1.5rem;
border-radius: 5px;
background: linear-gradient(to left, rgb(86, 136, 143), Black);
flex-direction: column;
align-items: center;
justify-content: center;
}
SOLVED
I moved <main style={{ padding: 20, }}> to after <Grow>, issue solved.
<Grow
in={secondScreenActive}
style={{ transformOrigin: '0 0 0' }}
{...(secondScreenActive ? { timeout: 1000 } : {})}
>
<main style={{ padding: 20, }}>
<div className={styles.cardPerson}>
<div style={{ flex: 1, display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'space-between', flexDirection: 'row' }}>
<div style={{width:'1vw'}}>
<Medal style={{height:'15vw',position: 'absolute', top: 20, left: -30}}/>
</div>
</div>
</div>
</main>
</Grow>
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}
/>
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!