I am trying to create custom header in React.js. I have a working prototype in this JSFiddle.
The problem is, React does not go well with css pseudo-elements, so following this advice I tried to "translate" it into React component:
var lineAfterStyle = {
position: 'absolute',
top: '51%',
overflow: 'hidden',
width: '50%',
height: '1px',
content: '\a0',
backgroundColor: 'red'
};
var lineBeforeStyle = {
position: 'absolute',
top: '51%',
overflow: 'hidden',
width: '50%',
height: '1px',
content: '\a0',
backgroundColor: 'red',
marginLeft: '-50%',
textAlign: 'right',
};
......
<div>
<div style={lineBeforeStyle} />
<h1 style={headerStyle}>Hello World!</h1>
<div style={lineAfterStyle} />
</div>
This does not work as expected--horizontal lines are placed somewhere on the screen and they are NOT inlined with the header. Is there any way to make it better?
Related
I need to build horizontal progress bar with circle at the end in react js, as shown in picture. I am able to build progress bar with custom "%", now I want to add circle at the end with some text inside.
code for progress bar with custom "%":
codesandbox
Change progress bar component to:
<div style={containerStyles}>
<div style={fillerStyles}>
<div style={circleStyles}>{circleText}</div>
</div>
</div>
And add this styles to the component:
const circleStyles = {
display: "flex",
position: "absolute",
right: "0",
width: "50px",
height: "50px",
background: "blue",
top: "-60%",
borderRadius: "50px",
justifyContent: "center",
alignItems: "center",
color: "white"
};
And here's the App.js:
export default function App() {
return (
<div className="App">
<ProgressBar
bgcolor={item.bgcolor}
completed={item.completed}
circleText={"100%"}
/>
</div>
);
}
add a span under container div and put this style to it
<div style={containerStyles}>
<div style={fillerStyles}></div>
<span style={circleStyle}>{text}</span>
</div>
style
const circleStyle = {
height: 40,
width: 40,
position: "absolute",
right: 0,
backgroundColor: bgcolor,
borderRadius: "50%",
top: -10,
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "white"
};
and then put this to containerStyle
position: "relative",
I have button in the bottom of the screen and the position of the button is absolute, but when the keyboard appear the button went up above the keyboard, is there a way to make the button stay in its position. Thankyou
my Code:
return(
<TouchableOpacity onPress={() => this.submitUpdate()}
style={styles.buttonPress}
>
<Image style={styles.buttonImage} source={require('../../../assets/images/tombol-simpan.png')}/>
</TouchableOpacity>
)
Styles :
buttonImage: {
position: 'absolute',
alignSelf: "center",
//marginTop: "2%",
width: "100%",
height: 80,
},
buttonPress: {
position: 'absolute',
alignSelf: "center",
//marginTop: "2%",
width: "100%",
height: 80,
top: '85%',
},
place your bottom button outside the keyboardavoidingview / scrollview .
I have a reusable component that contains an animation called AnimationLoader. This component is a reusable component for loading states. I'm simply trying to take this component and use it inside of another component, UnpublishBlogBtn as the loader after a button click - that all works fine. However, I'd like to change the height and width of the animation inside of UnpublishBlogBtn and cannot for the life of me get that to work properly.
I've tried implementing Object.assign to bring in the CSS from the other file and just change the height and width. I've also tried just changing the CSS by doing <style={{}}> as well as wrapping the component in a div that has a style added(this appears to just change the button and not the animation itself).
<Button type="main" className="blogBtn">
{currentlyUnpublishingBlog ? <AnimatedLoader css={{ height: 1, width: 1 }}/> :
'Unpublish Blog'}
</Button>
const AnimatedLoader = () => {
return (
<div
css={{
height: 45,
width: 45
}}
>
<AnimatedIcon
css={{
animationDelay: '0.7s',
height: 35,
left: 10,
position: 'absolute',
top: 10,
width: 35
}}
/>
<AnimatedIcon
css={{
animationDelay: '0.7s'
display: 'none',
height: 45,
left: 0,
top: 0,
width: 45,
}}
/>
<div
css={{
borderRadius: 20,
borderStyle: 'solid',
borderWidth: 3,
height: 45,
position: 'absolute',
width: 45,
}}
/>
</div>
)
};
export default AnimatedLoader;
After user clicks on Unpublish Blog button, the loader should display as a smaller width and height on top of the button. Currently, it maintains the same size as what is listed inside of AnimatedLoader component and I'd like the size to change inside of the UnpublishBlogBtn component.
You can pass your css in as a prop to your AnimatedLoader
const AnimatedLoader = ({css={
height: 45,
width: 45
}}) => {
return (
<div
{...css}
>
<AnimatedIcon
css={{
animationDelay: '0.7s',
height: 35,
left: 10,
position: 'absolute',
top: 10,
width: 35
}}
// ....
If you need to do more complex things, it's probably more sensible to pass in a prop that describes the different style options as a group. So isSmallSize as a boolean or different sizes as an enum etc.
Then in your component you adjust the styles depending on the prop.
const AnimatedLoader = ({ isSmallSize = false }) => {
const outerSize = isSmallSize ?
{ height: 45, width: 45 } : { height: 1, width: 1 }
const iconSize = isSmallSize ?
{ height: 35, width: 35 } : { height: 1, width: 1 }
return (
<div css={{ ...outerSize }}>
<AnimatedIcon
css={{
animationDelay: '0.7s',
left: 10,
position: 'absolute',
top: 10,
...iconSize
}}
/>
<AnimatedIcon
css={{
animationDelay: '0.7s',
display: 'none',
left: 0,
top: 0,
...iconSize
}}
/>
<div
css={{
borderRadius: 20,
borderStyle: 'solid',
borderWidth: 3,
position: 'absolute',
...iconSize
}}
/>
</div>
)
}
I’m having trouble aligning two components within another div in React. I’m using relative positioning for the parent div (snippetButtonHolder) and absolute positioning for its children (snippet and button). I want snippet to be centered in the parent and button to be under snippet and to the right, but for some reason when I use these attributes they are positioned relative to the entire page, not to the parent div. Does anyone have a suggestion as to what I should do differently?
const styles = {
module: {
marginTop: '30px',
padding: '20px',
},
snippet: {
backgroundColor: '#f2f2f2',
border: 'solid 1px #ccc',
borderRadius: '4px',
margin: '0 auto',
padding: '10px',
width: '100%',
position: 'absolute',
left: '50%',
},
snippetButtonHolder: {
width: '95%',
position: 'relative',
},
button: {
float: 'right',
marginTop: '5px',
position: 'absolute',
left: '94%',
},
};
export default class CodeSnippet extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div style={styles.module}>
<div style={styles.snippetButtonHolder}>
<div style={styles.snippet}>
<div
{'text will go here'}
</div>
{this.state.showButton ?
<button
style={styles.button}>
Press me
</button>
: null}
</div>
</div>
</div>
);
}
}
Give this a try:
const styles = {
module: {
marginTop: '30px',
padding: '20px',
},
snippet: {
backgroundColor: '#f2f2f2',
border: 'solid 1px #ccc',
borderRadius: '4px',
display: 'inline-block',
overflow: 'hidden',
padding: '10px',
},
snippetButtonHolder: {
textAlign: 'center',
width: '95%',
},
button: {
float: 'right',
marginTop: '5px',
},
};
Hi guys this Queryloader is working on my page but what i want now is to put image inside the loader(ex. company logo). Please help
<script src="loader/queryloader2.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
new QueryLoader2(document.querySelector("body"), {
barColor: "#e7c665",
backgroundColor: "#111",
percentage: true,
barHeight: 1,
minimumTime: 300,
fadeOutTime: 1000
});
});
</script>
http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/
The plugin loads preloads all the images in the HTML. There is no provision to load only a subset of images. At least none as far as the documentation goes.
It automatically fetches all your images and background images and preloads them before showing the webpage
-from the QueryLoader2 site
All you need to do is add some CSS code...
If you want to add custom text:
#qLoverlay::after {
position:absolute;
content:'your custom text here';
left:0;
right:0;
bottom:40%;
font-size:14px;
color:#FFF;
}
If you want to add an image:
#qLoverlay::before {
position:absolute;
content:url(exampleimage.png);
left:0;
right:0;
top:30%;
}
You can just use the following CSS rule:
#qLoverlay {
background: url(images/logo.png) no-repeat center 25%;
}
Modify the css this way:
#qLoverlay{
position: relative;
}
Only change the top for adjust the image.
#qLoverlay::before {
position:absolute;
content:url('images/logoedit1.png');
text-align: center;
top: 25%;
width: 100%;
}
I added the following where it creates the loading text, bar, and percentage
// CODE TO INSERT
this.loaderLogo = $("<div id='loader-logo'></div>").css({
background: 'url("http://chrisrocco.net/elegantearth/res/images/logo.png") no-repeat',
backgroundSize: '100%',
height: "400px",
width: "900px",
margin: "25px auto",
fontSize: "60px",
textAlign: "center",
color: this.parent.options.barColor
}).appendTo(this.container);
It belongs here, on line ~31 of queryloader2.js
if (this.parent.options.percentage == true) {
this.percentageContainer = $("<span id='qLpercentage'></span>").text("0%").css({
height: "80px",
width: "115px",
position: "absolute",
fontSize: "60px",
fontFamily: this.parent.options.fontFamily,
top: "75%",
left: "50%",
marginTop: "-" + (59 + this.parent.options.barHeight) + "px",
textAlign: "center",
marginLeft: "12px",
marginTop: "-120px",
color: this.parent.options.barColor
}).appendTo(this.container);
this.nameElem = $("<span id='elem-title'></span>").text("Loading ").css({
height: "80px",
width: "258px",
position: "absolute",
fontSize: "60px",
fontFamily: this.parent.options.fontFamily,
top: "75%",
left: "50%",
marginTop: "-" + (59 + this.parent.options.barHeight) + "px",
textAlign: "center",
marginLeft: "-270px",
marginTop: "-120px",
color: this.parent.options.barColor
}).appendTo(this.container);
// LINE 31
// INSERT HERE
}
You will, of course, have to tweak the css to your project
Picture of Result