I am working on a very simple website consisting of an image, with some text overlaid on top of it. In some cases, the image may be bigger than the screen, and then the user can scroll. However, I would like the overlaid text to remain on-screen, centered, even when the user scrolls. How can I do this?
Here is a basic idea of my code at the moment:
const styles = theme => ({
main_screen: {
position: "relative",
textAlight: "center",
color: "white",
height: '100%',
width: '100%',
margin: "0",
padding: "0"
},
caption: {
color: "yellow",
margin: "1em",
},
overlayText: {
position: "absolute",
width: "100%",
top: "5%",
alignItems:"center"
},
main_image: {
maxwidth: "100%",
maxHeight: "100%",
objectFit:"cover",
display: "block",
margin: "0",
padding: "0",
overflow: "scroll"
},
})
class ExampleSite extends React.Component {
....
render(){
return(
<div id="main-screen" className={classes.main_screen}>
<img id='target-image' onLoad={this.readDims} className={classes.main_image} src={pano_1} alt={""}/>
<div className={classes.overlayText}>
<Typography className={classes.caption} align="center" > {this.state.instructionText} </Typography>
</div>
</div>
)
}
}
position: fixed; on the text object is what you want. MDN - CSS Position
Related
I am trying to resize an image in React, but for some reason changing the height and width of the tag via useStyles does not make the image smaller, but simply shifts it around in the page.
Code:
import { makeStyles } from "#material-ui/core/styles";
import { SvgIcon, Typography } from "#mui/material";
import { Icon } from "#mui/material";
const useStyles = makeStyles((theme) => ({
pageContainer: {
display: "block",
marginTop: 120,
justifyContent: "center",
alignItems: "center",
},
logo: {
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "50%",
height: "50%",
},
info: {
display: "block",
justifyContent: "center",
alignItems: "center",
},
iconContainer: {
display: "flex",
height: "20vh",
width: "auto",
},
}));
const teamNames = [
"Name1",
"Name2",
"Name3",
"Name4",
];
export default function () {
const classes = useStyles();
return (
<div className={classes.pageContainer}>
<div className={classes.logo}>
<img src={process.env.PUBLIC_URL + "/myLogo.png"}></img>
</div>
<div className={classes.info}>
<Typography variant="h3" display="block" align="center">
About the Team
</Typography>
{teamNames.map((personName) => (
<Typography variant="h5" display="block" align="center">
{personName}
</Typography>
))}
</div>
</div>
);
}
I'm not quite sure what is the issue, all I really want to do is to make the image smaller proportionally and put it at the center of the page.
You will need to add this css to your img. this will make sure that the img adjusts itself within the parent div.
width: 100%;
height: fit-content;
I have a div like this in react js which renders multiple divs and overflows :
<div
style={{
display: "flex",
padding: "1em 0.7em",
overflowX: "auto",
width: "100%",
direction: "rtl",
background: "#ef394e"
}}
>
{Array.from(Array(10).keys()).map((each, index) => (
<div
key={index}
className="swiper-slide"
style={{
background: "white",
borderRadius: "10px",
width: "270px",
margin: "0 .4em"
}}
>
<div style={{ padding: "2em 6em" }}>Hello</div>
</div>
))}
</div>
But for some reason the padding is applied to the containers right side but not the left side here are some pictures :
How can I apply padding to the array item's container div for both the left and right sides ?
It's because your div width bigger then the body,
and as result your body also have scroll.
Try add boxSizing: border-box to your parent component, and the body scroll will disappear.
const App = () => {
return (
<div
style={{
display: "flex",
padding: "1em 0em",
overflowX: "auto",
width: "100%",
direction: "rtl",
background: "#ef394e",
boxSizing: "border-box" // <--- this line
}}
>
...
</div>
);
};
It's the padding on the div. It's to little and the margin too.
import React from "react";
const App = () => {
return (
<div
style={{
display: "flex",
padding: "1em 0em",
overflowX: "auto",
width: "100%",
direction: "rtl",
background: "#ef394e"
}}
>
{Array.from(Array(10).keys()).map((each, index) => (
<div
key={index}
className="swiper-slide"
style={{
background: "white",
borderRadius: "10px",
width: "270px",
margin: "0 .4em"
}}
>
<div style={{ padding: "2em 6em" }}>Hello</div>
</div>
))}
</div>
);
};
export default App;
import React from 'react';
import { makeStyles, Typography, Grid } from '#material-ui/core';
import Card from '#material-ui/core/Card';
const styles = makeStyles((theme) => ({
card: {
background: 'black',
width: '140px',
margin: '0px 10px',
},
root: {
width: '142px',
height: '196px',
overflow: 'hidden',
position: 'relative',
transition: 'all 0.5s ease-out',
},
image: {
position: 'absolute',
width: '100%',
height: '100%',
objectFit: 'cover',
transition: 'all 0.5s ease-out',
zIndex: 10,
'&:hover': {
zIndex: -1,
},
},
textPositioning: {
width: '140px',
height: '40px',
overflow: 'hidden',
marginTop: '10px',
},
text: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
fontFamily: 'Comfortaa',
},
genresContainer: {
backgroundColor: theme.palette.primary.main,
width: '100%',
height: '100%',
position: 'relative',
transition: 'all 0.5s ease-out',
zIndex: 2,
},
genreList: {
width: '100%',
height: '100%',
},
}));
interface AnimeData {
image_url: string;
title: string;
genres: Array<any>;
}
interface DisplayAnimeCardProps {
data: AnimeData;
}
const DisplayAnimeCard: React.FC<DisplayAnimeCardProps> = (
props: DisplayAnimeCardProps
) => {
const classes = styles();
const { data } = props;
console.log(typeof data, data.genres);
return (
<Card className={classes.card}>
<div className={classes.root}>
<img
className={classes.image}
alt='anime'
src={data.image_url}
/>
<div className={classes.genresContainer}>
<Grid
className={classes.genreList}
container
direction='column'
justifyContent='center'
alignItems='center'
>
{data.genres.map((genre) => (
<Typography
className={classes.text}
variant='body1'
>
{genre.name}
</Typography>
))}
</Grid>
</div>
</div>
<div className={classes.textPositioning}>
<Typography className={classes.text} variant='body1'>
{data.title}
</Typography>
</div>
</Card>
);
};
export default DisplayAnimeCard;
The Hovering effect show a div a top the image with some text. It works fine when I simply hover over the Card and do not move the cursor again. But If I move my cursor(during hovering) a top the card, the hover effect breaks and causes flickering between the textPositioningdiv and the image. I want to stop this flickering and just show the textPositioning div whenever I hover over the card and move my cursor
i want to place a popup based on the position of leftnav element. basically place this popup next to the lefnav element such that it is vertically center to leftnav element.
below is the picture of how the popup should be placed
below is my code,
function LeftNav() {
return (
<Wrapper id="left_nav">
</Wrapper>
);
}
const Wrapper = styled.div`
position: absolute;
top: 50%;
right: 16px;
display: flex;
flex-direction: column;
flex: 1;
`;
function PopUp() {
const left_nav_el = document.getElementById('left_nav');
return (
<PopupWrapper />
);
}
const PopupWrapper = styled.div`
width: 400px;
position: relative;
display: none;
`;
i am not sure how to get the top-left corner of the leftnav and use it as coordinates to place the popup in center and 16px away to the leftnav.
could someone help me with this. thanks.
const App = () => {
function LeftNav() {
return (
<div
style={{
height: "50px",
background: "black",
width: "50px"
}}
id="left_nav"
/>
);
}
function PopUp() {
return (
<div
style={{
marginRight: "16px",
height: "100px",
background: "green",
width: "50px"
}}
className="popup"
/>
);
}
return (
<div
style={{ width: "100px", display: "flex", alignItems: "center"}}
className="App"
>
<LeftNav />
<PopUp />
</div>
);
}
I am trying to create an application using React-Native the page i am working on takes data it is given from a web server to populate a list. i am trying to display 20 entries, this includes an image and a name. i would like to create 20 views that contain this information in a scroll-able view. When i put a view inside of the scroll view it disappears. I am having trouble figuring out how scroll views work exactly, could someone please explain how this is done?
Code:
<View style={commonStyle.container}>
{/* Scrollable View */}
<ScrollView style={toysListStyle.MainContent}>
<View style={toysListStyle.ToyEntry}>
<Image resizeMode="contain" style={toysListStyle.ToyPicture}
source={{uri: 'http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png'}}></Image>
<View style={toysListStyle.ToyNameView}>
<Text>Name</Text>
</View>
</View>
</ScrollView>
</View>
const toysListStyle = StyleSheet.create({
MainContent: {
position: "absolute",
left: "0%",
top: "33.5%",
width: "100%",
height: "60.5%",
backgroundColor: "rgba(0,0,0,0.05)",
flex: 1
},
ToyEntry: {
position: "absolute",
width: "100%",
height: "25%",
backgroundColor: "red",
flex: 1
},
ToyPicture: {
position: "absolute",
top: "5%",
left: "5%",
height: "90%",
width: "60%"
},
ToyNameView: {
position: "absolute",
top: "
right: "
height: "100%",
width: "
justifyContent: '
alignItems: 'center'
}
});
const commonStyle = StyleSheet.create({
container: {
position: "absolute",
bottom: 0,
left: 0,
height: windowHeight,
width: "100%",
backgroundColor: "white",
justifyContent: 'center',
alignItems: 'center',
},
I left out the information of the entire page because there is a lot but this is where i am having the problem. If i Change the ScrollView to a View then the View inside shows up, but in a ScrollView It doesn't appear. What am i missing?
You did all things right but...
ToyEntry: {
position: "absolute",
width: "100%",
height: "25%",// This will work if parent contain fixed height like device height or in points and it will divide those value in that ratio...
backgroundColor: "red",
flex: 1
}
So you can add fixed height to ToyEntry or you can add fixed height to
its parent...
I was able to view the content inside ScrollView with a bit change in ToyEntry style, just add height to absolute value instead of %
ToyEntry: {
position: "absolute",
width: "100%",
height: 250,
backgroundColor: "red",
flex: 1
}
Also, the image that you have shared, for some reason is not showing so I changed the image link also to see the result
<Image resizeMode="contain" style={styles.ToyPicture}
source={{uri: 'https://unsplash.it/400/400?image=1'}}
/>