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!
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 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'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
position absolute with all its properties in 0 makes the child element expand in the parent element, and if I put a padding in the parent element without a height the child with the position absolute cover until the of the parent padding, my theory is right or I am forgotting something here?there could be another different case?
import React from 'react';
import {View, StyleSheet} from 'react-native';
import Video from 'react-native-video';
export default function Reproductor(props) {
return (
<View style={styles.container}>
<View style={styles.videoContainer}>
<Video
source={{
uri:
'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
}}
resizeMode="cover"
style={styles.video}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
height: 250,
justifyContent: 'center',
alignItems: 'center',
},
videoContainer: {
width: '90%',
paddingTop: '56.25%',
borderRadius: 20,
overflow: 'hidden',
borderWidth: 3,
backgroundColor: 'black',
},
video: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
});
the child (video) covers the padding
An absolutely positioned element is an element whose computed
position value is absolute or fixed. The top, right,
bottom, and left properties specify offsets from the edges of the element's containing block.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
position absolute related to the edges of the parent element (= ignores parent padding/border).
<div style="padding: 50px; background: red; color: white; position:relative;">
<div style="border: 1px solid white; height: 50px;"></div>
<div style="position: absolute; background: blue; top:0; left:0; color: white;">child</div>
</div>
top: 0; right: 0; bottom: 0; left: 0; is the way to set overlay:
Example: https://www.w3schools.com/howto/howto_css_overlay.asp
<div style="padding: 50px; background: red; color: white; position:relative;">
<div style="border: 1px solid white;">div</div>
<div style="position: absolute; background: rgba(0, 0, 0, 0.5); top:0px; left:0px; right: 0; bottom: 0; color: white;">overlay</div>
</div>
Add space by top: 10px; for example (or em % and so on)
<div style="padding: 50px; background: red; color: white; position:relative;">
<div style="border: 1px solid white;">Parent</div>
<div style="position: absolute; background: blue; top:10px; left:10px; color: white;">child</div>
</div>
Or add a margin for the absolute element:
<div style="padding: 50px; background: red; color: white; position:relative;">
<div style="border: 1px solid white;">Parent</div>
<div style="position: absolute; background: blue; top:0px; left:0px; color: white;margin: 10px;">margin: 10px around</div>
</div>
You find more tricks/ideas but these are the basics ideas.
Thank you I understand, but you said that it cover padding and border (position absolute related to the edges of the parent element (= ignores parent padding/border).), and I try to cover the border too but it just ignore the padding not the border, what is my mistake here?
export default function MainScreen(props) {
return (
<View style={style.container}>
<View style={style.element} />
</View>
);
}
const style = StyleSheet.create({
container: {
borderWidth: 3,
padding: 40,
alignSelf: 'center',
width: 200,
height: 200,
backgroundColor: 'grey',
},
element: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
width: 100,
height: 100,
backgroundColor: 'purple',
},
});