How can I achieve absolute centering with CSS-in-JS? When I use the following code, my component moves across the screen. I guess the translate is being applied many times instead of just once. What's going on, and how can I fix it without using a library?
render() {
return (<ComponentASD
style={{
position: 'absolute', left: '50%', top: '50%',
transform: 'translate(-50%, -50%)'
}} />);
}
Another option is to use flex-box.
<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}>
Hello world
</div>
Your example code works well:
ReactDOM.render(
<div
style={{
position: 'absolute', left: '50%', top: '50%',
transform: 'translate(-50%, -50%)'
}}
>
Hello, world!
</div>,
document.getElementById('root')
);
https://codepen.io/anon/pen/JaLLmX
It has to do something with your layout.
Thanks for the testing+comments! The styling ended up being fine, the issue was somehow caused by the layout of ComponentASD, which is actually MUI's CircularProgress https://material-ui.com/api/circular-progress/#demos
I wrapped that component in a div inside of render and applied the styling to the div, which fixed the problem (keeps it stationary and properly aligned).
This is flexbox you will need to use this on the parent Component.
.Parent {
display: flex,
flexFlow: row nowrap,
justifyContent: center,
alignItems: center,
{
It will center the children vertically and horizontally
You can also align each component as I've shown you below
render() {
return (<Childcomponent
style={{
display: flex,
flexFlow: row nowrap,
justifySelf: center,
alignSelf: center,
}} />);
}
If you want to have a properly scrollable list if the window's height is smaller than the content's height you want to center, you can do this (based on this CSS answer):
<div
style={{
display: "table",
position: "absolute",
height: "100%",
width: "100%",
top: 0,
left: 0
}}
>
<div
style={{
display: "table-cell",
verticalAlign: "middle",
textAlign: "center"
}}
>
// Here comes the content you want to center
</div>
</div>
If you want to use it in a component just call it in the component:
.Login {
text-align: center;
background-color: #2681C6;
min-height: 100vh;}
Your jsx file sould have something like just to call it, using "className":
<div className="Login"><div>
Related
I have this element in my React code:
{focusedAnnotationIconProps && (
<div
style={{
backgroundColor: "#333",
width: "100px",
position: "absolute",
left: focusedAnnotationIconProps.left,
top: focusedAnnotationIconProps.top + 25,
color: "#fff",
}}
>
{annotationIconPopoverText}
</div>
)}
this is a popover that will show when hovering over an icon, so I get the CSS left/top position numbers from that Icon (in another part of the code), and place it there, and currently, is showing like this:
I need to center this popover in the middle of the icon
but the thing is, this <div> element has variable width, depending on the text inside
so I was thinking of someway to do something like this:
left: focusedAnnotationIconProps.left - this.width/2
but I know that won't work.. I tried using the calc css3 function, but won't work inline with CSS, so there's my problem.. would appreciate any help
With position: absolute, you can use these methods to center the elements:
Center Vertically:
style={{
top: "50%",
transform: "translateY(-50%)"
}}
Center Horizontally:
style={{
left: "50%",
transform: "translateX(-50%)"
}}
Center to the parent div:
style={{
left: "50%",
top: "50%",
transform: "translate(-50%, -50%)"
}}
I'm coding a basic eCommerce website using NextJS and I'm having a problem
I want to have a sticky tab in the middle of my page but for some reason position: 'sticky' doesn't work
This is my code
[other stuff here]
<div className={classes.stickyTab}>
<Grid style={{ backgroundColor: '#FFFFFF' }}>
<div className={classes.outerTab}>
<div className={classes.innerTab}>
<div>Tab number 1</div>
</div>
</div>
</Grid>
<Grid style={{ backgroundColor: '#FFFFFF' }}>
<div className={classes.outerTab2}>
<div className={classes.innerTab2}>
<div>Tab number 2</div>
</div>
</div>
</Grid>
</div>
[other stuff here]
And this is the styles.js
stickyTab: {
position: 'sticky',
},
outerTab: {
display: 'flex',
paddingTop: 16,
paddingRight: 16,
paddingBottom: 16,
paddingLeft: 16,
},
innerTab: {
fontSize: '20px',
},
outerTab2: {
position: 'relative',
marginTop: 10,
marginBottom: 10,
},
innerTab2: {
position: 'relative',
marginLeft: 10,
marginRight: 10,
marginBottom: 10,
},
This is what it looks like visually
Basically all I want is for my 2 white bars to be sticky so that they stay on the screen when I scroll pass them. All I did was wrap both of them inside a div then gave it position: 'sticky' but like I said it didn't work like I thought it would. Perhaps I'm missing something here?
Any helps would be much appreciated, thanks.
Using position sticky property requires you to add the position also.
Try adding top: 0; and width: 100% and height: 50px. You can have the width and height according to your needs.
stickyTab: {
position: 'sticky',
top:"0",
width:'100%',
height: '50px'
}
I want the hover functionality to happen (UI) which is happening in this case:
Desired UI
Source: https://www.loewshotels.com/santa-monica
Now since modifying background image styles is a bit complicated, I have to use the Box Component from Material UI and in it, I have placed the image and also done the desired transitions like zoom out, etc. However I cannot add text on the Box component (which again is basically inside a Card Component).
Code for the specified part:
<Grid item xs={4}>
<Card
onMouseDown={console.log("fewfwg")}
className={classes.cardWelcomeTwo}
>
<CardActionArea>
<Box variant="outlined" style={{ position: "relative" }}>
<img
className={classes.paperImgWelcome}
src="https://render.fineartamerica.com/images/rendered/default/greeting-card/images-medium-5/ferris-wheel-sunset-eddie-yerkish.jpg?&targetx=0&targety=-25&imagewidth=500&imageheight=751&modelwidth=500&modelheight=700&backgroundcolor=AF7163&orientation=1"
alt="nothing"
/>
<CardContent>
<Typography
variant="h4"
component="h2"
className={classes.welcomeGridHeadingText}
>
Explore The City
</Typography>
</CardContent>
</Box>
</CardActionArea>
</Card>
</Grid>
Styles.js:
paperImgWelcome: {
flexGrow: 1,
position: "relative",
"&:hover ": {
display: "flex",
transition: "0.6s all ease-in-out",
// animationTimingFunction: "ease-out",
transform: "scale(1.1)",
backgroundSize: "75%",
opacity: "0.75",
},
},
cardWelcomeTwo: {
position: "relative",
height: 510,
flexGrow: 1,
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
},
welcomeGridHeadingText: {
position: "absolute",
textAlign: "center",
color: "white",
fontFamily: "'Lato'",
fontSize: "60px",
letterSpacing: "5px",
lineHeight: "60px",
},
Currently, my UI looks like this:
not hovered
hovered
You can use the ::after pseudo-element with the content property and show it only on hover.
Here's a simple example:
CSS
.backgroundImage {
background-image: url("https://render.fineartamerica.com/images/rendered/default/greeting-card/images-medium-5/ferris-wheel-sunset-eddie-yerkish.jpg");
height: 500px;
color: white;
padding: 50px;
}
.backgroundImage:hover::after {
content: "For a ride";
}
HTML
<div className="backgroundImage">
<h1>Let's Go</h1>
</div>
For simplicity it uses just plain HTML/css.
If you want to see it in action in a material-ui/React project here's the sandbox link.
I want to extend the TextInput to the entire screen and not set a definite width.
To do that I know we have to set "flex:1"
But it doesn't seem to work at all.
What is wrong here?? I want the TextInput to be stretched with the Button next to it.
<View style={{flex: 1, alignItems: 'stretch' , flexDirection: 'row'}}>
<TextInput value="nil" style={{ backgroundColor:"grey", height: 40}} textAlign='center'/>
<Button title="V" onPress={()=>{this.dropList()}} />
</View>
I want something like this. How do I get this???
You can use CSS Grid in your View, adding grid-template-columns for the columns width, like:
display: grid;
grid-template-columns: 1fr 3rem;
width: 100%;
With inline styles (not recommended at all):
{{ display: 'grid'; gridTemplateColumns: '1fr 3rem'; width: '100%' }}
You are putting the flex property on the parent whereas it needs to be applied on the TextInput itself.
Bonus: You don't need to set flexDirection to row because that's the default.
Here's a pure HTML, CSS example to show what I mean.
.view {
display: flex;
}
.view input {
flex: 1;
}
<div class='view'>
<input/>
<button>Click Me</button>
</div>
I want to make the img and text below as close as possible, but I'm having difficulties doing so..
CSS for style on container :
const style = {
height: '100%',
top: '0px',
left: '0%',
width:'12%',
position: 'fixed',
color: 'rgb(30 215 96)',
textAlign: 'center',
background: 'rgb(40, 40, 40)'
};
<Container style={style}>
<Table>
<TableRow>
<TableCell style={{width: '3px'}}>{track.trackCover,
<img
class="cover"
alt="cover"
style={{ width: "50px", height: "50px" }}
src={track.trackCover}
/>}</TableCell>
<TableCell style={{width: '3px'}} >{track.name}, {track.artists}</TableCell>
</TableRow>
</Table>
</Container>
I've currently got it set up like this. The width in the table cell reduces it as close as the img above, however I want them basically touching.. I've tried -3px and even 0. But They seem to make it more distant. Can someone help me identify what I'm doing wrong please?